import { Component , ViewChild , TemplateRef } from '@angular/core' ; import { DomSanitizer } from '@angular/platform-browser' ; import { ngxLoadingAnimationTypes , NgxLoadingComponent } from '../../projects/ngx-loading/src/public_api' ; const PrimaryWhite = '#ffffff' ; const SecondaryGrey = '#ccc' ; const PrimaryRed = '#dd0031' ; const SecondaryBlue = '#006ddd' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { @ ViewChild ( 'ngxLoading' , { static : false } ) ngxLoadingComponent : NgxLoadingComponent ; @ ViewChild ( 'customLoadingTemplate' , { static : false } ) customLoadingTemplate : TemplateRef < any > ; public ngxLoadingAnimationTypes = ngxLoadingAnimationTypes ; public loading = true ; public primaryColour = PrimaryWhite ; public secondaryColour = SecondaryGrey ; public coloursEnabled = false ; public loadingTemplate : TemplateRef < any > ; public config = { animationType : ngxLoadingAnimationTypes . none , primaryColour : this . primaryColour , secondaryColour : this . secondaryColour , tertiaryColour : this . primaryColour , backdropBorderRadius : '3px' } ; constructor ( private sanitizer ) { } public toggleColours ( ) { this . coloursEnabled = ! this . coloursEnabled ; if ( this . coloursEnabled ) { this . primaryColour = PrimaryRed ; this . secondaryColour = SecondaryBlue ; } else { this . primaryColour = PrimaryWhite ; this . secondaryColour = SecondaryGrey ; } } toggleTemplate ( ) { if ( this . loadingTemplate ) { this . loadingTemplate = null ; } else { this . loadingTemplate = this . customLoadingTemplate ; } } public showAlert ( ) { alert ( 'ngx-loading rocks!' ) ; } }