Currently, I am working with Angular 2 and have a div element that I need to repeat in my HTML markup. This particular div contains a click event attached to it. Here is the code snippet:
HTML:
<div class="row">
<button class="btn btn-primary" (click)="addExtra">
Add Extra</button>
</div>
<div *ngFor="let val of addExtra">
<div class="row">
<div class="col-md-2">
<label for="title">Title</label>
</div>
<div class="col-md-8">
<input type="text" id="title" style="width:100%" class="form-control" />
</div>
</div>
</div>
</div>
The TypeScript function associated with the button is as follows:
class MyClass {
// Other lines of code...
addExtra(): void {
this.addExtra.push("inserted");
}
}
Do you have any suggestions on how to assign a unique identifier to each dynamically added div? My goal is to include a delete button for each individual div.