typescript hello.component.ts

Posted 2021-05-20

@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';
  }

}