Angular 4 - programmatically remove the current dynamic component

Question

I created some dynamic components, for example -

<div> <ang-textfield></ang-textfield> <ang-textarea></ang-textarea> <ang-checkbox></ang-checkbox> </div> 

Within a particular dynamic component there are some elements, such as -

 <ang-textfield> <input type="text" /> <button>Settings</button> <button (click)="remove_component()">Remove</button> </ang-textfield> 

I want to remove the current component after clicking the Remove button.

How can i do this?

Here is the plunker

Answer 1

You can pass the factory component as a reference to the Dynamic Build component and then to the Dynamic Component. You have a Destroy button.

This Gist will give you a clearer idea.

A live example