How to update html content of an element with angular function?

Question

I have a table fulfilled with ngFor directive.

Each line has a title, a badge (Material badge) and a button. I would like to change matBadge value when I click on my button.

The function returns a value that I would like to set it in the matBadge of the current line, not others.

Is there a way to pass my current line badge in my function, to update value?

UPDATE

Here is part of my HTML code work throw For loop :

<table *ngFor="let layer of items">
    <li>
        <div [id]="layer.id">
            <button [matBadge]="indexLayer">Toggle</button>
            <button (click)="this.utilsService.changeIndex('raise', layer, $event)"> change </button>
        </div>
    </li>
</table>

What I would like is identify my div with id and pass it throw my function (something like $event) to update my indexLayer which is different for each line

Thanks !

Answer 1

Ok, I found another solution to achieve my purpose

I had an attribute in my utils.service.ts file :

public indexList: Map<String, String> = new Map();

my function is like :

changeIndex(layer){
    imageryLayers.raise(layer);
    this.utilsService.indexList.set(layer.id, imageryLayers.indexOf(layer));
}

Something like above works fine.

And my html :

<button [matBadge]="this.utilsService.get(layer.id)"> Toggle </button>