File
Implements
Metadata
| selector |
full-page-loader |
| styleUrls |
full-page-loader.component.css |
| templateUrl |
full-page-loader.component.html |
|
model
|
model:
|
Default value : new LoaderModel()
|
|
|
import { Component, OnInit } from '@angular/core';
import { LoaderModel } from '../../models/loader.model';
import { LoaderStore } from '../../stores';
import { MaterialService } from '../../services';
@Component({
// tslint:disable-next-line:component-selector
selector: 'full-page-loader',
templateUrl: 'full-page-loader.component.html',
styleUrls: ['full-page-loader.component.css']
})
export class FullPageLoaderComponent implements OnInit {
model = new LoaderModel();
constructor(private loader: LoaderStore, private material: MaterialService) {}
ngOnInit() {
this.loader.isVisible$.subscribe(isVisible => {
this.model.setVisibility(isVisible);
if (isVisible) {
this.material.render();
}
});
this.loader.isSuccess$.subscribe(message => {
this.model.success(message);
});
this.loader.isError$.subscribe(message => {
this.model.error(message);
});
}
close() {
this.model.close();
}
}
<div *ngIf="model.visibility === model.states.visibility.VISIBLE" (click)="close()" class="backdrop">
<div class="mdl-grid no-spacing">
<div *ngIf="model.completion === model.states.completion.NONE" class="mdl-cell mdl-cell--12-col center">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<br />
<h6 class="loading-text off-white">{{model.message}}</h6>
</div>
<div *ngIf="model.completion === model.states.completion.SUCCESS" class="mdl-cell mdl-cell--12-col center result-icon">
<i class="material-icons lg-font complete-icon">check_circle</i>
<h6 class="off-white">
<pre class="material-font">{{model.message}}</pre>
</h6>
</div>
<div *ngIf="model.completion === model.states.completion.ERROR" class="mdl-cell mdl-cell--12-col center result-icon">
<i class="material-icons lg-font fail-icon">error</i>
<h6 class="off-white">
<pre class="material-font">{{model.message}}</pre>
</h6>
<h5 class="subtext"><small>click anywhere to close</small></h5>
</div>
</div>
</div>
Legend
Html element with directive