CODEWITHSUNDEEP
angulartypescriptmaterial-design
mhfour
mhfour

Reputation: 265

angular - changing the icon colour when clicked

I currently have a table which displays list of items. Each item has an icon next to it. What I would like to do is to click on them icon and it will changes its colour. Right now, when I click on any of the icons, it will only change the colour of the first icon.

<table class="table table-borderless" style="background-color: #CCE4E9">
    <tbody>
        <tr *ngFor="let content of acts">
            <td style="font-size: 14px;" *ngIf="content.status == 2;">{{content.description}}
            </td>
            <td>
                <button id="addToSummary" class="mdc-icon-button material-icons" style="color: #FFFFFF;"
                    (click)="addToSummary()">grade</button>
            </td>
        </tr>
    </tbody>
</table>

addToSummary(){
  document.getElementById("addToSummary").style.color = "#3DA2DA";

}

screenshot

What do I need to do to change just one of it?

Upvotes: 2

Views: 3888

Answers (3)

lovos25
lovos25

Reputation: 151

Renderer can be used to manipulate the DOM 

import { ElementRef, Renderer2} from '@angular/core';

constructor(private elRef: ElementRef, private renderer: Renderer2) { }

addToSummary() {
    let elm = this.elRef.nativeElement.querySelector('#addToSummary');
    this.renderer.setStyle(elm, 'color', '#3DA2DA');
}

Upvotes: 0

Mathyn
Mathyn

Reputation: 2620

You current solution does not work because getElementById only returns a single (the first found) element with the given id. Besides this performing such DOM queries is definitely not the Angular way.

Instead you would need to change your button definition to something like this:

<button class="mdc-icon-button material-icons" [style.color]="content.isSelected ? '#3DA2DA' : 'FFFFFF'" (click)="addToSummary(content)">grade</button>

And we also change our addToSummary method to look like this:

addToSummary(content){
    content.isSelected = true;
}

So the basic idea is like this:

  • Each elements in your acts array has an isSelected property
  • If this property is set to true the star is colored blue
  • In the addToSummary method we set the isSelected property to true
  • We handle this the 'Angular way' by using [style.color] which allows us to define a simple expression to toggle between white and blue color.

Upvotes: 3

Yash Rami
Yash Rami

Reputation: 2327

You can also try like this way

 <table class="table table-borderless" style="background-color: #CCE4E9">
   <tbody>
        <tr *ngFor="let content of acts; let i = index;">
           <td style="font-size: 14px;" *ngIf="content.status == 2;"> 
              {{content.description}}
           </td>
           <td>
               <button id="addToSummary" [ngClass]="['addToSummary', i]" class="mdc-icon-button material-icons" style="color: #FFFFFF;"
                (click)="addToSummary(i)">grade</button>
           </td>
        </tr>
  </tbody>
</table>

addToSummary(i){
     let className = "addToSummary " + i;
     document.getElementByClassName(className).style.color = "#3DA2DA";
}

Upvotes: 0

Related Questions