CODEWITHSUNDEEP
javascriptangulartypescript
user10735022
user10735022

Reputation:

How to add badge on div in angular 6?

How to add badge on div in angular 6?

I have dynamic div in html. I want to increase counter for specific div. For example i have five div whose id is (div1, div2, div3, div4, div5) and i have one button name increase counter which increase counter for all div but i want to increase counter value for specific div. Please find enclosed file.

Please find snapshot:

Please find snapshot

i have attached my sample code:

Here is the html for displaying div:

<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 calss="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>

Here is the function in .ts file:

increaseCounter(k) {
  this.counter++;
}

I want to add counter on specific div.

Please help me how can i do this in angular 6?

Upvotes: 0

Views: 1374

Answers (2)

user10734805
user10734805

Reputation:

Try it:

<button (click)="counter1 = counter1++" class="btn btn-default">
DIV <label class="badge badge-default">{{ counter1 }}</label>
</button>

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39472

You might have to tweak this a bit, but you can use Bootstrap's Badges

Use it' like this:

<button (click)="div1Counter = div1Counter + 1" type="button" class="btn btn-primary">
  DIV 1 <span class="badge badge-light">{{ div1Counter }}</span>
</button>

Here's a Working Sample StackBlitz for your ref.

Upvotes: 1

Related Questions