diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 61dce07..d60d953 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,6 +9,10 @@ export class AppComponent { divALoading: boolean; divBLoading: boolean; + constructor() { + this.divALoading = true; + } + toggleDivALoading() { this.divALoading = !this.divALoading; } diff --git a/src/app/directives/app-spinner.directive.ts b/src/app/directives/app-spinner.directive.ts index a0f3273..9ae88d7 100644 --- a/src/app/directives/app-spinner.directive.ts +++ b/src/app/directives/app-spinner.directive.ts @@ -4,7 +4,7 @@ import { ComponentRef, Directive, HostListener, - Input, + Input, OnChanges, OnDestroy, OnInit, TemplateRef, ViewContainerRef @@ -14,9 +14,10 @@ import {SpinnerComponent} from '../components/spinner/spinner.component'; @Directive({ selector: '[appSpinner]' }) -export class AppSpinnerDirective implements OnInit { +export class AppSpinnerDirective implements OnInit, OnChanges, OnDestroy { private message: string; + private createEmbeddedViewTimer: number; @Input('appSpinner') set showSpinner(spinning: boolean) { @@ -27,7 +28,9 @@ export class AppSpinnerDirective implements OnInit { this.spinnerComponent = this.container.createComponent(this.componentFactory); this.spinnerComponent.instance.message = this.message; } else { - this.container.createEmbeddedView(this.template); + this.createEmbeddedViewTimer = setTimeout(() => { + this.container.createEmbeddedView(this.template, 0); + }); } } @@ -49,6 +52,16 @@ export class AppSpinnerDirective implements OnInit { } + ngOnChanges(changes) { + if (this.spinnerComponent && changes.spinnerMessage) { + this.spinnerComponent.instance.message = changes.spinnerMessage.currentValue; + } + } + + ngOnDestroy() { + clearTimeout(this.createEmbeddedViewTimer); + } + @HostListener('click', ['$event']) public onClick(event: any): void { event.stopPropagation();