Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Final host component
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
selector: 'host',
templateUrl: './host.component.html',
styleUrls: [ './host.component.css' ],
entryComponents: [DynamicComponent]
})
export class AppComponent {
name = 'Dynamic';
dynamicComponents = [];
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
get hasDynamicComponents() {
return this.container.length > 0;
}
constructor (private resolver: ComponentFactoryResolver) {
}
addComponent() {
let factory = this.resolver.resolveComponentFactory(DynamicComponent);
let inputs = { name: this.name };
let component = factory.create(null);
Object.keys(inputs).map(input => {
component.instance[input] = inputs[input];
});
this.dynamicComponents.push(component);
this.container.insert(component.hostView);
}
removeComponent() {
this.dynamicComponents.pop().destroy();
}
clearComponents() {
for(let component of this.dynamicComponents) {
component.destroy();
}
this.dynamicComponents = [];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.