ngClass does not switch value when using object in component

Question

When I use the following code to switch the class everything works fine

<p [ngClass]="idPresent ? 'alert alert-success' : 'alert alert-danger'">
  Working
</p>

On changing the value of IdPresent in the component, I can see the appropriate class being applied,

but when I use an object in the component for the same purpose it only works if idPresent is false. When I set the idPresent to true, the following code does not apply the appropriate class.

<p [ngClass]="idValueClass">
   Not working
</p>

public idPresent = false;
 
public idValueClass = {
  "alert alert-success" : this.idPresent,
  "alert alert-danger"  : !this.idPresent
};

Can someone help me figure out what am I doing wrong?

Update:

I am changing the value of idPresent after receiving response from REST API call

 ngOnInit(): void {
 this.http.get('http://localhost:8083/v1/uniqueid', {
  headers: {'Authorization':'Basic dXNlcjpwYXNzd29yZA=='}
 })
 .subscribe(response => {
    if(response) {
      console.log(response)
       this.serverId = response;
       this.idPresent = true;
    } else {
       this.idPresent = false;
    }
    console.log("idPresent : " + this.idPresent)
 })

}

After receiving response from server, I can see updated value in console.

If you're not using signal, remember inside subscribe function give the new value not only to this.idPresent else to idValueClass — Eliseo
– Eliseo, Commented Nov 16, 2023 at 8:00

Eliseo · Accepted Answer · 2023-11-15 09:18:24Z

3

To complementary @Yong Shun, in Angular 16 and 17 we can use signal

We can define:

  public idPresent = signal(false);

  public idValueClass = computed(() => ({
    alert: true,
    'alert-success': this.idPresent(),
    'alert-danger': !this.idPresent(),
  }));

  onClick() {
    this.idPresent.update(value => !value);
  }

Be carefull, the .html we need reemplace idPresent by idPresent() and idValueClass by idValueClass()

  <p [ngClass]="idValueClass()">
    Not working
  </p>
  Current idPresent: {{ idPresent() }}

A stackblitz full stolen from the Yong Shun stackblitz.

NOTE: See that in the stackblitz I use changeDetection:ChangeDetectionStrategy.OnPush, but, when a signal is update, Angular update the entire view

answered Nov 15, 2023 at 9:18

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Bagira Over a year ago

I tried using signal but when making the suggested changes in html to replace idValueClass by idValueClass(), I get following error: error TS2349: This expression is not callable. Type '{ alert: boolean; "alert-success": WritableSignal<boolean>; "alert-danger": boolean; }' has no call signatures.

Eliseo Over a year ago

@Bagira, check the stackblitz in my answer, you need define: idValueClass = computed(() => ({...})

Yong Shun · Accepted Answer · 2023-11-15 08:28:36Z

1

I believe that you mentioned the issue in which the "alert" class is removed.

From the documentation,

Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

This results that the last "alert" was false and will be removed from the class.

Modify the idValueClass as below:

public idValueClass = {
  alert: true,
  'alert-success': this.idPresent,
  'alert-danger': !this.idPresent,
};

Demo @ StackBlitz

Updated

As raised by @Eliseo, if you have a button or logic to update the idPresent, the idValueClass will not automatically reflect the latest value.

You need a trigger/change event to overwrite the idValueClass.

<button class="btn btn-primary" (click)="onClick()">Update</button>

onClick() {
  this.idPresent = !this.idPresent;
  this.idValueClass = {
    alert: true,
    'alert-success': this.idPresent,
    'alert-danger': !this.idPresent,
  };
}

Or implement a getter for idValueClass (However it is not a good practice, Refer: Getter and setter in templates is a bad idea)

edited Nov 15, 2023 at 8:28

answered Nov 15, 2023 at 2:20

Yong Shun

54.4k6 gold badges38 silver badges66 bronze badges

6 Comments

Eliseo Over a year ago

See that the "idValueClass" object not change when you change the "this.idPresent"

Yong Shun Over a year ago

Hi @Eliseo, sharp eyes! That will be another issue as the change of idPresent will not update idValueClass. Unless you need to overwrite the idValueClass when idPresent is updated.

Eliseo Over a year ago

From Angular 16, we can also use signal. NOTE: Personally I don't like so much, but I feel that we need getting use to use

Bagira Over a year ago

@YongShun I updated question to show how I am updating the value. Do you see anything wrong there.

Yong Shun Over a year ago

Hi @Bagira, the update you mention that updating the idPresent doesn't reflect to idValueClass. As similar what I write for the updated part. As you first declare the idValueClass variable and initialize the value with idPresent as value but not reference type. This will not auto update the idValueClass. Either you need to overwrite/re-assign the idValueClass or use the signal as @Eliseo's answer.

|

Anjasmara Dwi.S · Accepted Answer · 2023-11-15 07:49:40Z

0

i ever this problem before, i ever any key name class can be hidden like "success", "alert", "warning" etc with same case before. i try to make it single name class (alert-success") , not mutiple class ("alert alert-success") .

you can try this code as below =

enter code here

public idValueClass = {
  'alert': true,
  'alert-success': this.idPresent,
  'alert-danger': !this.idPresent,
};

i more suggestion condition on ngClass use tenary then get value on .ts

idValueClass() {
  return this.idValueClass ? 'alert alert-success' : 'alert alert-danger'
};

answered Nov 15, 2023 at 7:49

Anjasmara Dwi.S

3291 silver badge9 bronze badges

Collectives™ on Stack Overflow

ngClass does not switch value when using object in component

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related