Adding or changing class in Angular 2 based on specific conditions

Question

Adding or changing class in Angular 2 based on specific conditions

Currently, my focus is on building a web application using Angular and the Semantic-UI framework.

In order to add a single class to an element based on a specific condition, I have successfully implemented the following syntax:

[class.className]='condition'

However, I am now faced with a situation where I need to apply multiple class names to an element, and I am unsure of the correct approach to take.

To address this issue, I attempted to utilize ngClass by referencing a Plunker example found here. Unfortunately, the provided solution did not yield the desired results.

My question now is, how can I modify my Plunker to achieve the desired functionality?

css angular styles semantic-ui ng-class

Answer 1

Answer №1

To create a string with multiple classes, you can utilize the [ngClass] directive here.

<div [ngClass]="('firstClass ' + (active ? 'secondClass' : ''))"></div>

In this scenario, firstClass represents the initial class, while active is a boolean determining the inclusion of the secondClass.

Therefore, in your specific situation, your code could be adjusted as follows:

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]="((myForm.controls.name.pending ? 'loading' : '') + 'secondClass')">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

Ensure there are spaces between each pair of class names.

UPDATE

In relation to your plunker example, remember to incorporate the ngClass statement like so:

[ngClass]="[o.order === 'asc' ? 'chevron circle up': '' , o.order === 'desc' ? 'chevron circle down': '']"

Answer 2

To create a string with multiple classes, you can utilize the [ngClass] directive here.

<div [ngClass]="('firstClass ' + (active ? 'secondClass' : ''))"></div>

In this scenario, firstClass represents the initial class, while active is a boolean determining the inclusion of the secondClass.

Therefore, in your specific situation, your code could be adjusted as follows:

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]="((myForm.controls.name.pending ? 'loading' : '') + 'secondClass')">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

Ensure there are spaces between each pair of class names.

UPDATE

In relation to your plunker example, remember to incorporate the ngClass statement like so:

[ngClass]="[o.order === 'asc' ? 'chevron circle up': '' , o.order === 'desc' ? 'chevron circle down': '']"

Answer 3

Answer №2

If you want to dynamically apply classes in Angular, you can utilize the [ngClass] directive.

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]="{loading : myForm.controls.name.pending}">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

When the condition evaluates to true, the specified classes will be added to the element. If the condition is false, the classes will be removed from the element.

Answer 4

If you want to dynamically apply classes in Angular, you can utilize the [ngClass] directive.

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]="{loading : myForm.controls.name.pending}">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

When the condition evaluates to true, the specified classes will be added to the element. If the condition is false, the classes will be removed from the element.

Adding or changing class in Angular 2 based on specific conditions

Answer №1

Answer №2

Similar questions

Guide to defining custom variables from various locations within Angular Js

Which ngTagsInput version is recommended for Angular instead of AngularJs?

The 'api' property is not found within the 'MyService' type declaration

jQuery mobile enhancing user experience with dynamic background images

Tips for executing numerous asynchronous tasks in Ionic 3 and closing a loader once all tasks are completed

Pressing the button in the navigation bar results in an expansion of the navbar

Utilizing the CSS properties of table-cell and float in a display

What is the specific use of the second app.css file in Laravel?

What is the best way to move an element from a relative to an absolute position smoothly?

Sorting custom folders and files in an Angular Material table is a breeze with this handy feature

Adjust the positioning of the share section to take up the entire width on mobile devices, while displaying differently

Ways to trigger a function in Angular every 10 seconds

creating a gap between two links within a div element

Increasing the font size of the mdToolTip in Angular2 Materials

Encountering an error while trying to run ng serve following ng build

Position the text at the top edge of the image

Closing iframe in Angular 4 after redirection

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

"Exploring the world of Typescript code through the eyes of Chrome with the help of the