Angular > Érdemes tudnivalók dinamikus komponens létrehozásnál

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

}

parent.component.ts:

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

}

Ebben az esetben a válasz Igen, az Angular törli a komponenst mihelyst a szülője törlődik.

Még egy fontos dolgot figyelembe kell venni, ha a komponens @Output()-jára kézzel iratkozunk fel a komponenst nekünk kell kitakarítunk, máskülönben memory leak-ünk lesz.

ex.component.ts:

import { untilDestroyed } from 'ngx-take-until-destroy';

ngOnInit() { 
  const factory = this.fr.resolveComponentFactory(HelloComponent);
  const ref = this.ref.createComponent(factory);
  ref.instance.name = 'World';
  ref.instance.someOutput.pipe(untilDestroyed(this)).subscribe(...) <======
}

Forrás:

https://netbasal.com/things-worth-knowing-about-dynamic-components-in-a…