@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent {
_name;
@Input() set name(name: string) {
this._name = name;
}
get name() {
return this._name;
}
}
@Component({
selector: 'app-parent',
template: `<p>Parent:</p><ng-container #vcr></ng-container>`
})
export class ParentComponent implements OnInit {
@ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;
constructor(private fr: ComponentFactoryResolver) {
}
ngOnInit() {
const factory = this.fr.resolveComponentFactory(HelloComponent);
const ref = this.vcr.createComponent(factory);
ref.instance.name = 'World';
}
}