0

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 !

StPaulis
  • 2,844
  • 1
  • 14
  • 24
Fab83i
  • 85
  • 7
  • 1
    [Here](https://stackoverflow.com/questions/31548311/angular-html-binding) should be something that would help – Louis Apr 29 '22 at 08:59
  • Probably you want to pass the index as an argument to your function, and based on the index change the badge. – AT82 Apr 29 '22 at 09:51
  • I have an id on my table row, I want to pass my line by identifying it with id to change badge value – Fab83i Apr 29 '22 at 09:57
  • A kind of `function($('#id'))` in jquery js, but with angular structure – Fab83i Apr 29 '22 at 09:58
  • Well you are not presenting any code.... but in your click event, pass then the id... something like `(click)="myFunction(item.id)"` in your template. You really need to provide a [mcve] in your question. – AT82 Apr 29 '22 at 10:09
  • Sorry, in fact its for work and I do not have internet on my development computer, that is why I cannot share my code, because I have to rewrite it. But i will try – Fab83i Apr 29 '22 at 12:29
  • I updated my post, so there is part of the code now – Fab83i Apr 29 '22 at 12:42

1 Answers1

0

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>
Fab83i
  • 85
  • 7