import 'zone.js/dist/zone'; import { Component, ComponentRef, Directive, DoCheck, EmbeddedViewRef, inject, Input, OnChanges, OnInit, TemplateRef, ViewContainerRef, } from '@angular/core'; import { CommonModule, NgIf } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser'; import { BlockUIModule } from 'primeng/blockui'; import { PanelModule } from 'primeng/panel'; import { provideAnimations } from '@angular/platform-browser/animations'; import { ButtonModule } from 'primeng/button'; import { ProgressSpinnerModule } from 'primeng/progressspinner'; @Component({ selector: 'app-loader', template: `

`, standalone: true, styles: [ ` .loading-container { position: relative; } .blocker { background-color: black; position: absolute; top: 0; z-index: 9999; width: 100%; height: 100%; opacity: 0.4; } `, ], imports: [NgIf, ProgressSpinnerModule], }) export class LoaderComponent { @Input() loading = false; } @Directive({ selector: '[loading]', standalone: true, }) export class LoaderDirective implements OnInit, DoCheck, OnChanges { private readonly templateRef = inject(TemplateRef); private readonly vcRef = inject(ViewContainerRef); @Input() loading = false; templateView: EmbeddedViewRef; loaderRef: ComponentRef; ngOnInit() { this.templateView = this.templateRef.createEmbeddedView({}); this.loaderRef = this.vcRef.createComponent(LoaderComponent, { injector: this.vcRef.injector, projectableNodes: [this.templateView.rootNodes], }); this.loaderRef.setInput('loading', this.loading); } ngOnChanges() { this.loaderRef?.setInput('loading', this.loading); } ngDoCheck() { this.templateView?.detectChanges(); } } @Component({ selector: 'my-app', standalone: true, imports: [ CommonModule, BlockUIModule, PanelModule, LoaderDirective, ButtonModule, ], template: ` Learn more about Angular `, }) export class App { loading = true; } bootstrapApplication(App, { providers: [provideAnimations()], });