The functionality of ngClass fails to toggle the value appropriately when utilizing an object within a component

Question

The functionality of ngClass fails to toggle the value appropriately when utilizing an object within a component

When implementing the code below to toggle the class, everything runs smoothly

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

After changing the value of IdPresent in the component, I observe the correct class being applied,

However, when I use an object in the component for the same purpose, it only functions properly if idPresent is set to false. If I switch idPresent to true, the code provided fails to apply the right class.

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

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

Could someone assist me in understanding what mistake I might be making?

Update:

I modify the value of idPresent once I receive a response from the 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)
 })

}

Once the server responds, I can observe the updated value in the console.

css angular ng-class angular-ng-class

Answer 1

Answer №1

In Angular versions 16 and 17, we have the option to utilize signals as pointed out by @Yong Shun.

Here is an example of how to implement this:

public idPresent = signal(false);

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

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

It's important to note that in the .html file, we need to replace idPresent with idPresent(), and idValueClass with idValueClass().

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

You can view a demo on StackBlitz, which was adapted from Yong Shun's StackBlitz project.

NOTE: In the StackBlitz demo, I used

changeDetection:ChangeDetectionStrategy.OnPush

, but please be aware that when a signal is updated, Angular refreshes the entire view.

Answer 2

In Angular versions 16 and 17, we have the option to utilize signals as pointed out by @Yong Shun.

Here is an example of how to implement this:

public idPresent = signal(false);

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

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

It's important to note that in the .html file, we need to replace idPresent with idPresent(), and idValueClass with idValueClass().

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

You can view a demo on StackBlitz, which was adapted from Yong Shun's StackBlitz project.

NOTE: In the StackBlitz demo, I used

changeDetection:ChangeDetectionStrategy.OnPush

, but please be aware that when a signal is updated, Angular refreshes the entire view.

Answer 3

Answer №2

It appears that the issue you mentioned involves the removal of the "alert" class.

According to the information provided in 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 means that if the last "alert" was false, it will be removed from the class list.

To address this, update the idValueClass as follows:

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

View Demo on StackBlitz

Update:

As pointed out by @Eliseo, if there is a button or logic to update the idPresent, the changes may not automatically reflect in the idValueClass.

A trigger/change event is necessary to update the idValueClass accordingly.

<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,
  };
}

Alternatively, you can implement a getter for idValueClass (although it is not recommended, see: Getter and setter in templates is a bad idea)

Answer 4

It appears that the issue you mentioned involves the removal of the "alert" class.

According to the information provided in 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 means that if the last "alert" was false, it will be removed from the class list.

To address this, update the idValueClass as follows:

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

View Demo on StackBlitz

Update:

As pointed out by @Eliseo, if there is a button or logic to update the idPresent, the changes may not automatically reflect in the idValueClass.

A trigger/change event is necessary to update the idValueClass accordingly.

<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,
  };
}

Alternatively, you can implement a getter for idValueClass (although it is not recommended, see: Getter and setter in templates is a bad idea)

Answer 5

Answer №3

I've encountered this issue before, where key names like "success", "alert", "warning" can be hidden with the same case. I attempted to create a single name class ("alert-success") instead of multiple classes ("alert alert-success").

You can test the following code:

enter code here

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

I recommend using ternary conditions in ngClass for more flexibility in getting values in .ts files.

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

Answer 6

I've encountered this issue before, where key names like "success", "alert", "warning" can be hidden with the same case. I attempted to create a single name class ("alert-success") instead of multiple classes ("alert alert-success").

You can test the following code:

enter code here

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

I recommend using ternary conditions in ngClass for more flexibility in getting values in .ts files.

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

The functionality of ngClass fails to toggle the value appropriately when utilizing an object within a component

Answer №1

Answer №2

Answer №3

Similar questions

Styling input groups with box shadows in Bootstrap 4

A guide on capturing the text content of the error message from the <mat-error> element with Protractor

When using percentages in HTML, the height and width of a background picture may not scale correctly

Dropdown within Datatable does not automatically select the bound option [PrimeNG]

The Angular user interface is failing to update in accordance with the list obtained from the HTTP GET request made to the .Net Core API

Utilizing conditional styling in React: the ability to add or attach CSS classes based on

I found that the Angular checkbox was only allowing me to select one value at a time instead of

Seeking assistance with rearranging items using flexbox when transitioning between portrait and landscape mode

cdkDropList does not function properly when used with ng-template in a dynamic component list

Fade In/Out Scroll Effect

Optimized Image Loading with Angular17's ngSrc

The dropdown will close automatically when the user clicks outside of it

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

Is it possible that the div's height is not being set to 0 pixels

Responsive Bootstrap tables nested within responsive tabs

Struggling to position CSS div in the middle of computer screen

Text in the middle of a button

How can I restrict the number of items displayed in each row within a navigation submenu flexbox?

What is the best way to flip the direction of the text input for a Calculator?

What causes the Object expected error in jQuery?