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


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?


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

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

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 !


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 :

    this.utilsService.indexList.set(, imageryLayers.indexOf(layer));

Something like above works fine.

And my html :

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

Answered By – Fab83i

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.