I am working on a project that involves providing information on vehicle ponents. Each ponent has a set of descriptive fields. I have an "Add another ponent" button that needs to create an identical div container with the same fields. The cloned parent div will need a different ID of course. For example:

In the ponent html file:

<div id="ponent-outer">
    <div class="ponent-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="clone()">Add Another Component</div>

In the ponent ts file:

export class AppComponent {
    clone(){
         Need to clone #ponent-outer div and append below the last instance 
         of that div, then append the div name on the cloned element.
    }
}

I am accustomed to using javascript/jQuery to clone elements, but having trouble finding the best approach to EXACTLY what I am trying to acplish in Angular. Is cloning the right approach?

I am working on a project that involves providing information on vehicle ponents. Each ponent has a set of descriptive fields. I have an "Add another ponent" button that needs to create an identical div container with the same fields. The cloned parent div will need a different ID of course. For example:

In the ponent html file:

<div id="ponent-outer">
    <div class="ponent-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="clone()">Add Another Component</div>

In the ponent ts file:

export class AppComponent {
    clone(){
         Need to clone #ponent-outer div and append below the last instance 
         of that div, then append the div name on the cloned element.
    }
}

I am accustomed to using javascript/jQuery to clone elements, but having trouble finding the best approach to EXACTLY what I am trying to acplish in Angular. Is cloning the right approach?

• javascript
• angular
• typescript
• clone

Share Improve this question Follow asked Jun 5, 2018 at 18:46 MikronmanMikronman 5122 silver badges44 bronze badges 1

• 1 You should clone an item in your model, and have your HTML bind to a list. You should not manipulate the DOM directly in Angular apps. – SLaks Commented Jun 5, 2018 at 18:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use *ngFor to create DOM elements for each item in an array.

<div id="ponent-outer">
    <div *ngFor="let item of items" class="ponent-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}

This is covered in the documentation in the first chapter of the first tutorial.

https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor