src/app/components/loading/loading.component.ts
OnInit
selector | app-loading |
styleUrls | ./loading.component.scss |
templateUrl | ./loading.component.html |
Properties |
|
constructor(data: string)
|
||||||
Parameters :
|
Public data |
Type : string
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
loadingText$ |
Type : Observable<UIStateModel>
|
Decorators :
@Select(UIState)
|
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { UIState, UIStateModel } from '../../store/ui.state';
@Component({
selector: 'app-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.scss'],
})
export class LoadingComponent implements OnInit {
@Select(UIState) loadingText$!: Observable<UIStateModel>;
constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
ngOnInit(): void {
this.loadingText$.subscribe((l) => {
this.data = l.loadingText;
});
}
}
<div #loadingDialog>
<div class="text-center">
<div class="h5">Please wait...</div>
<img src="assets/loading.svg" alt="" class="w-50" />
<div class="col" [innerHTML]="data"></div>
</div>
</div>
./loading.component.scss