Angular 4 - Remove current dynamic component programmatically

Question

I have created some dynamic components like -

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

Within specific dynamic component there are some elements like -

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

I want to remove current component after clicking Remove button.

How can i do that?

Here is the plunker

I have created these dynamic components from drag elements within drop area. Now I need to delete specific dynamic component after clicking delete button within the component. — user3384985
– user3384985, Commented Sep 23, 2017 at 5:34

Rahul Singh · Accepted Answer · 2017-09-23 07:06:50Z

2

You can Pass the component factory as a Reference to the Dynamic Build Component and then in the Dynamic Component Have a button Destroy .

This Gist will give you a Clearer Idea.

answered Sep 23, 2017 at 7:06

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1