Angular 4 Click + ngClass, how to apply ONLY to SELF but not ALL elements inside ngFor

Question

In Angular 2 when I clicked the button, it added class "newstyle" every "button" inside the ngFor loop... how do I bind the ngClass condition to the element itself only?

<button [ngClass]="{'newstyle': isClicked }" (click)=" isClicked = !isClicked">Click button</button>

Thank you!

What does your `for` loop look like? Can you create some conditions inside it which will satisfy only your single button you want to apply the class style ? — mihai, Sep 18 '17 at 07:20
My question is similar to this: https://stackoverflow.com/questions/38565002/angular-2-click-ngclass-how-to-apply-only-to-self-but-not-all-elements-inside But the new answer is not working on Angular 4. And I dont know why: — Naturo Power, Sep 18 '17 at 07:23
I added a more generic answer to the question you posted in your comment because the accepted one was very low quality. — n00dl3, Sep 18 '17 at 08:09

score 3 · Accepted Answer · answered Sep 18 '17 at 07:26

3

Try this:

<button *ngFor="let thing of things" [class.newstyle]="currentThing === thing" (click)="currentThing = thing">Click button</button>

And you have to add currentThing as a property of your component's class:

export YourComponent {
    currentThing: any;
}

answered Sep 18 '17 at 07:26

Faly

13,291
2
19
37

Awesome! Thank you! Did you know how to do the same with *ngIf? Example:

– Naturo Power Sep 18 '17 at 07:45
Click button export YourComponent { isShown: boolean[]; } – Faly Sep 18 '17 at 07:51
@TwikssPower, see `*ngIf` in my answer too: `Item was Clicked: {{item.id}}`. Can be applied in same manner to any html element. good luck! – mihai Sep 18 '17 at 07:59

mihai · Answer 2 · 2017-09-18T07:54:07.703

A similat UseCase: iterate through collection and apply a specific class item-updated for items in collection which were edited.
This part is optional, just for demo: [attr.title]="item.isDirty ? 'Item was updated' : null"

html component

<div *ngFor="let item of collection">
    <label>Name: {{item.name}}</label>
    <button class="btn"
         [ngClass]="{'item-updated' : item.isDirty}"
         [attr.title]="item.isDirty ? 'Item was updated' : null">
     Save
    </button>
</div>

Explanations: Only when the item.isDirty condition is matched, the button will receive the specific class.

In your case, from question, all your buttons are binded to the same isClicked property. So, does not matter which one is edited, your property changes, and all other buttons receive the newest class.

EDIT: The code snippet from question:

<button [ngClass]="{'newstyle': isClicked }" (click)=" isClicked = !isClicked">Click button</button>

Transformed

HTML component

    <div *ngFor="let item of yourArray">
        <label *ngIf="item.isClicked">Item was Clicked: {{item.id}}</label>
        <button [ngClass]="{'newStyle' : !item.isClicked}" (click)="changeItemState(item)">Click button </button>
    </div>

TS component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your.component.html'  
})
export class YourComponent implements OnInit {
    public yourArray: any[];

    public ngOnInit(): void {
        this.yourArray = [
            {
                id: 1,
                name: 'First',
                isClicked: false;
            }, 
            {
                id: 2,
                name: 'Second',
                isClicked: false;
            }, 
            {
                id: 3,
                name: 'Third',
                isClicked: true;
            }, 
        ];
    }

    public changeItemState(item: any): void {
        item.isClicked = !item.isClicked;
    }
}

Angular 4 Click + ngClass, how to apply ONLY to SELF but not ALL elements inside ngFor

2 Answers2