How can I add a badge to a specific div in Angular 6?
I have dynamic div elements in my HTML. I want to increase the counter for a specific div only, rather than increasing it for all divs at once. For example, I have five divs with IDs div1, div2, div3, div4, and div5. I also have a button called "increase counter" which should only increment the counter value for the selected div. Please see the attached file for reference.
Kindly refer to the screenshot below:
Please find my sample code attached:
This is the HTML snippet displaying the divs:
<div class="container text-center">
<div class="row">
<div class="col-sm" *ngFor="let item of [1,2,3,4,5]; let index" style="height:120px; border:1px solid #ccc">
Div {{ index }} <label class="badge badge-default">0</label>
</div>
</div>
<br />
<p><a (click)="increaseCounter(index)" class="btn btn-primary" style="cursor: pointer">Increase Counter</a></p>
</div>
This is the function in the .ts file:
increaseCounter(k) {
this.counter++;
}
I need assistance on how to implement this feature in Angular 6 specifically targeting a particular div element.
Could you please provide guidance on achieving this in Angular 6?