CODEWITHSUNDEEP
htmlcssangular
Mauricio Gracia Gutierrez
Mauricio Gracia Gutierrez

Reputation: 10844

ngClass is there a better way to have a style always present and add other based on condition

I'm very new to ng-class and I need to have a default class always applied to a span and add another class when a certain condition happens

<span
    [ngClass]="{'timeString': true, 'disabledText': conditionalExpression}">
</span>

My css contains:

.timeString{
    width: 50px;
}

.disabledText {
    color: rgba(0, 0, 0, 0.38);
}

I have checked similar questions but not found what I'm looking for.

Basically I want to get rid of the 'timeString': true part

Upvotes: 0

Views: 377

Answers (2)

Lukasz Gawrys
Lukasz Gawrys

Reputation: 1334

Another approach is to pass an array of classes


// you would add more classes when needed somewhere in your component
// based on your logic

public myClassList = ['timeString'];

<span [ngClass]="myClassList"> </span>

Upvotes: 1

laiju
laiju

Reputation: 1373

You can try this

<span class="timeString" [ngClass]="{'disabledText': conditionalExpression}"></span>

Upvotes: 3

Related Questions