src/app/loader/loader.component.ts
| selector | app-loader |
| styleUrls | loader.component.css |
| templateUrl | ./loader.component.html |
Methods |
Inputs |
constructor(materialService: MaterialService)
|
||||||
|
Defined in src/app/loader/loader.component.ts:15
|
||||||
|
Parameters :
|
cssclass
|
Default value: |
|
Defined in src/app/loader/loader.component.ts:15
|
|
header
|
Default value: |
|
Defined in src/app/loader/loader.component.ts:11
|
|
message
|
Default value: |
|
Defined in src/app/loader/loader.component.ts:13
|
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/loader/loader.component.ts:18
|
|
Returns :
void
|
import { Component, Input, OnInit } from '@angular/core';
import { MaterialService } from '../services';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
@Input()
header = 'Retrieving Data';
@Input()
message = 'Please wait a moment while we retrieve your information.';
@Input()
cssclass = '';
constructor(private materialService: MaterialService) {}
ngOnInit() {
console.log('app-loader component loaded');
this.materialService.render();
}
}
<div id="loadingData" class="empty-page-ctn loading-ctn {{cssclass}}">
<div class="loading-more-ctn">
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
<h3 class="status-header status-normal">{{header}}</h3>
<div class="page-description">
<p class="para-medium">{{message}}</p>
</div>
</div>