Add component to dom on click of button in angular2

Question

I have personInvolved component. This component has personDetails component. There is a button in personInvolved component. Onclick of the button I need to append the personDetails on DOM. each time I click it should append the personDetails component. How can I achieve this.

Do you want to remove the component and create it again each time? Or do you want to keep adding an instance on every click? — Filip Lauc
– Filip Lauc, Commented Aug 30, 2016 at 6:20
Then the below answer by @JB Nizet is the approach you should take. — Filip Lauc
– Filip Lauc, Commented Aug 30, 2016 at 6:48
How can I remove or pop the array in personDetails component. PersonDetail is having a button called remove — raj m
– raj m, Commented Aug 30, 2016 at 9:00
You're going to have to use a service. Take a look at this doc angular.io/docs/ts/latest/cookbook/… — Filip Lauc
– Filip Lauc, Commented Aug 30, 2016 at 9:10

Roy · Accepted Answer · 2019-05-13 09:28:14Z

24

Use *ngFor:

    <button (click)="addPerson()">Add person</button>
    <person-details *ngFor="let person of persons" [person]="person"></person-details>

And in the component code:

    persons: Array<Person> = [];

    addPerson() {
        this.persons.push(new Person());
    }

edited May 13, 2019 at 9:28

Roy

8,1295 gold badges29 silver badges49 bronze badges

answered Aug 30, 2016 at 6:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

6 Comments

raj m Over a year ago

Here personDetails is other component having templateURL. I need to append the personDetails on click of addperson button in personInvolved component. First time it will append one <person-details>. Next time it should append one more persondetails on click.. And so on

raj m Over a year ago

What is new Person() method here ?

raj m Over a year ago

How can I remove or pop the array in personDetails component. PersonDetail is having a button called remove.

JB Nizet Over a year ago

The person-details component should not be the one removing itself from its parent component's model. Either put the delete button out of the person-details component, or have it emit an event (using an EventEmitter), and listen to this event in the parent component to know that delete has been clicked and that the component should thus be removed from the array.

raj m Over a year ago

I have used eventEmitter, but how can I manage the index for which one to delete. I can able to pop the array but couldnot find which one has been clicked..Can you please help me

|

Collectives™ on Stack Overflow

Add component to dom on click of button in angular2

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related