Angular Class Binding

Question

I have a code on which I have used class binding. When the button is clicked, the color of the font should change based on the value of textrun. textrun changes between true and false.IF true, it should display text in red color else in green color.

TS File

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  textrun=true;
  messageClasses={
    "text-success": !this.textrun,
    "text-error": this.textrun,
    "text-info": !this.textrun

    }

  changetrue(){
  this.textrun=false;
  console.log("done");
}
}

HTML File

 <h2 [ngClass]="messageClasses">hai</h2>
  <button (click)="changetrue()">click</button>

css File

.text-success{
  color:green;
}
.text-error{
  color:red;
}
.text-info{
font-style: italic;
}

EDIT: I needed the same code to work if I have multiple conditions to be applied.

Surjeet Bhadauriya · Accepted Answer · 2019-12-04 09:54:30Z

3

You can use any of the below approach

Approach 1:

<h2 [ngClass]="{'text-error': textrun', 'text-success': !textrun }">hai</h2>

Approach 2:

<h2 [ngClass]="textrun ? 'text-error':'text-success'">hai</h2>

Approach 3:

<h2 [ngClass]="{true:'text-error',false:'text-success'}[textrun]">hai</h2>

answered Dec 4, 2019 at 9:54

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nXn Over a year ago

Thank you @Surjeet. But if I have three conditions to be applied. Like I need the font to be italics also, how do I apply class binding?

nXn Over a year ago

Thank you . I got it. Appreciate you Support.

Muhammed Albarmavi Over a year ago

the last approach is a ninjs style 🐱‍👤 👍

Surjeet Bhadauriya Over a year ago

😃 @MuhammedAlbarmavi

Adrita Sharma · Accepted Answer · 2019-12-04 10:58:10Z

2

Try like this:

<h2 [ngClass]="textrun ? 'text-error':'text-success'">hai</h2>

or,

<h2 [ngClass]="{'text-error': textrun, 'text-success': !textrun }">hai</h2>

Demo

edited Dec 4, 2019 at 10:58

answered Dec 4, 2019 at 9:52

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

3 Comments

nXn Over a year ago

Thank you @Adrita. It sure can be written that way. And it works. I had tried. But I don't understand why the above code doesn't work. Any suggestion on that ?

Adrita Sharma Over a year ago

@nXn The syntax you were trying was incorrect. I have added another way to do it in the demo

nXn Over a year ago

Thank you. Please update the answer with the answer in Demo so that other can also make use of the info. That worked.Appreciate you Support.

Freeky · Accepted Answer · 2020-05-12 22:04:32Z

2

This won't work since the messageClasses is loaded only once, during the class instantiation.

Change your html to:

<h2 [ngClass]="{
  "text-success text-info": !textrun,
  "text-error": textrun
  }">
  hai
</h2>
<button (click)="changetrue()">click</button>

and delete your messageClasses variable from your class

edited May 12, 2020 at 22:04

answered Dec 4, 2019 at 10:08

Freeky

8205 silver badges14 bronze badges

1 Comment

nXn Over a year ago

Yes. Thank you. I got it.

Ling Vu · Accepted Answer · 2019-12-04 10:28:16Z

1

It does not work, because you are refering to this.textrun on your attributes.

Usually it is not available when the component is initialized:

Try:

textrun = true;

messageClasses;

ngOnInit() {
   this.messageClasses = {
    "text-success": !this.textrun,
    "text-error": this.textrun,
    "text-info": !this.textrun
   }
}

onClick() {
  this.textrun = !this.textrun;
  this.messageClasses = {
    "text-success": !this.textrun,
    "text-error": this.textrun,
    "text-info": !this.textrun
  }
}

At ngOnInit() all attributes should be declared and initialized.

edited Dec 4, 2019 at 10:28

answered Dec 4, 2019 at 10:01

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

3 Comments

Ling Vu Over a year ago

A brief explanation what was not working would much more helpful instead of 'not working'

Ling Vu Over a year ago

Can you log this after that?

Himanshu Singh Over a year ago

i made the changes you mentioned and the color isn't changing on button click

Collectives™ on Stack Overflow

Angular Class Binding

4 Answers 4

4 Comments

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related