angular4 dynamic add remove component

정답 : https://stackoverflow.com/questions/44939878/dynamically-adding-and-removing-components-in-angular

정답 발췌 :

mport {   Component,   ComponentFactoryResolver, Type,   ViewChild,   ViewContainerRef } from '@angular/core'; // Example component (can be any component e.g. app-header app-section) import { DraggableComponent } from './components/draggable/draggable.component'; @Component({   selector: 'app-root',   template: `     <!-- Pass the component class as an argument to add and remove based on the component class -->     <button (click)="addComponent(draggableComponentClass)">Add</button>     <button (click)="removeComponent(draggableComponentClass)">Remove</button>     <div>       <!-- Use ng-template to ensure that the generated components end up in the right place -->       <ng-template #container>       </ng-template>     </div>   ` }) export class AppComponent {   @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;   // Keep track of list of generated components for removal purposes   components = [];   // Expose class so that it can be used in the template   draggableComponentClass = DraggableComponent;   constructor(private componentFactoryResolver: ComponentFactoryResolver) {   }   addComponent(componentClass: Type<any>) {     // Create component dynamically inside the ng-template     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);     const component = this.container.createComponent(componentFactory);     // Push the component so that we can keep track of which components are created     this.components.push(component);   }   removeComponent(componentClass: Type<any>) {     // Find the component     const component = this.components.find((component) => component.instance instanceof componentClass);     const componentIndex = this.components.indexOf(component);     if (componentIndex !== -1) {       // Remove component from both view and array       this.container.remove(this.container.indexOf(component));       this.components.splice(componentIndex, 1);     }   } }

Notes:

1. If you want to make it easier to remove the components later on, you can keep track of them in a local variable, see this.components. Alternatively you can loop over all the elements inside the ViewContainerRef.

2. You have to register your component as an entry component. In your module definition register your component as an entryComponent (entryComponents: [DraggableComponent]).

Running example: https://plnkr.co/edit/mrXtE1ICw5yeIUke7wl5

For more information: https://angular.io/guide/dynamic-component-loader

참고: 

https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

https://angular.io/guide/dynamic-component-loader