import { Component , ViewChild , ViewContainerRef } from '@angular/core' ; import { MdDialog } from '@angular/material' ; import { AppDummyComponent } from './app-dummy/app-dummy.component' ; import { AFSpawnService } from "./af-spawn.service" ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] , } ) export class AppComponent { title = 'app works!' ; @ ViewChild ( 'dummyoutlet' , { read : ViewContainerRef } ) dummyOutlet ; constructor ( public dialog , private spawnService ) { } showThing ( ) { let dialogRef = this . dialog . open ( AppDummyComponent , { height : '400px' , width : '600px' , } ) ; } showCustomThing ( ) { let context = { title : 'Brocchi Rocks' } ; let spawnRef = this . spawnService . createComponent ( AppDummyComponent , this . dummyOutlet , context ) ; let i = 0 ; setInterval ( _ => { i ++ ; context . title = i . toString ( ) ; spawnRef . next ( context ) ; } , 100 ) ; } showAnotherThing ( ) { const context = { title : 'Another thing' , onClick : ( ) => console . log ( 'output called' ) } ; let spawnRef = this . spawnService . createComponent ( AppDummyComponent , undefined , context ) ; let i = 0 ; setInterval ( _ => { i ++ ; context . title = i . toString ( ) ; spawnRef . next ( context ) ; } , 100 ) ; } }