ngClass with multiple conditions

Question

ngClass with multiple conditions

I am currently working on implementing the following functionality - I have two pre-set classes that are combined with some component variables successfully. However, I now need to include an additional conditional class.

Although the first part is functioning correctly, I am facing issues with the object part:

[ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, {'btn-rounded': isRounded}]"

Here, isRounded is declared as a component @Input().

@Input() isRounded: boolean = false;

The desired end result looks like this:

<a class="btn btn-success btn-md btn-rounded">okay</a>

javascript angular typescript

Answer 1

Answer №1

It is not possible to use both arrays and objects in the ngClass directive simultaneously, as explained here. Instead, you can either combine the class attribute with ngClass, or utilize a ternary condition for conditional styling.

Example using class and ngClass:

<button [class]="'btn-' + buttonStyle + ' btn-' + buttonSize" [ngClass]="{'btn-rounded': isRounded}">Test</button>

Example using a ternary condition within ngClass:

<button [ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, isRounded ? 'btn-rounded' : '']">Test</button>

Answer 2

It is not possible to use both arrays and objects in the ngClass directive simultaneously, as explained here. Instead, you can either combine the class attribute with ngClass, or utilize a ternary condition for conditional styling.

Example using class and ngClass:

<button [class]="'btn-' + buttonStyle + ' btn-' + buttonSize" [ngClass]="{'btn-rounded': isRounded}">Test</button>

Example using a ternary condition within ngClass:

<button [ngClass]="['btn-' + buttonStyle, 'btn-' + buttonSize, isRounded ? 'btn-rounded' : '']">Test</button>

Answer 3

Answer №2

Here is a way you can achieve this:

 const buttonClassList = {
      [`btn-${buttonStyle}`]: true,
      [`btn-${buttonSize}`]: true,
      [`btn-rounded`]: isRounded,
}

Then, in your template:

<a [ngClass]="buttonClassList">okay</a>

Check out this StackBlitz example for reference.

Answer 4

Here is a way you can achieve this:

 const buttonClassList = {
      [`btn-${buttonStyle}`]: true,
      [`btn-${buttonSize}`]: true,
      [`btn-rounded`]: isRounded,
}

Then, in your template:

<a [ngClass]="buttonClassList">okay</a>

Check out this StackBlitz example for reference.

ngClass with multiple conditions

Answer №1

Answer №2

Similar questions

Is there a way to disable a JavaScript hover effect when the mouse moves away?

Consistently navigating back to the Home Page through AJAX

The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

Blank area located at the bottom of the document

Having trouble setting up the calendar feature in my Ionic Angular application

Tips on deobfuscating Next.js HTML from online sources

Using Angular 5 components within raw HTML: A step-by-step guide

What is the correct way to submit a formarray in an angular application following the specified format?

Harmonize the connectivity between an Angular - .NET application and the Google Calendar API

Unable to display returned data from an AJAX request made with jQuery autocomplete

Autonomous JQuery Modules

Checking if the current time falls within a specific range while also taking minutes into account

Tips for controlling or concealing slot elements within child components in Vue Js

Does jQuery mobile lack a back button feature?

Guide to Embedding an Image in a List in HTML

Maximizing the efficiency of table search with AngularJS filter

Difficulty commencing a background operation in a node.js application

What is the best way to ensure that JavaScript is loaded in a specific sequential order?

Creating a nested tree structure array from a flat array in Node.js

When working on a node.js project with Angular, I'm considering incorporating a new HTML framework such as Foundation Zurb or Bootstrap. Is this a good idea, or should I stick