import { Component , ElementRef , ChangeDetectorRef } from '@angular/core' ; import { LazyCmpLoadedEvent , ComponentLoaderService } from '@juristr/ngx-lazy-el' ; @ Component ( { selector : 'juristr-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { title = 'Component Lazy Loading 💪 by ng elements' ; isLoaded = false ; multilazy = false ; multilazyEl = false ; message ; userList = [ { name : 'Juri' } , { name : 'Steffi' } ] ; person ; constructor ( private elementRef , private cd , private cmpLoader ) { } ngOnInit ( ) { setInterval ( ( ) => { this . person = { name : 'Peter ' + Math . random ( ) } ; } , 2500 ) ; } onLoaded ( lazyCmp ) { console . log ( lazyCmp . selector + ' got instantiated' ) ; } onSave ( value ) { console . log ( 'Got' , value ) ; this . message = value . detail ; } loadProgrammatically ( ) { this . cmpLoader . loadComponent ( 'app-hello-world' , true ) . then ( ( ev ) => { ev . componentInstance [ 'person' ] = { name : 'Juri' } ; this . elementRef . nativeElement . querySelector ( '#manualLoading' ) . prepend ( ev . componentInstance ) ; } ) ; } }