Applying classes in Angular templates

Question

I'm using the [class.*] syntax to apply classes conditionally.
I've found myself wanting to always apply a class.

My current code is as follow:

[class.general]="true"
[class.new]="model.isNew"
[class.edited]="model.isEdited"

The [class.general]="true" is a bit weird and feels like an hack. Is there a standard/better way to have a fixed class while also using conditionals for other classes?

@yurzui really? I feel dumb. I tought it would get overridden — LppEdd, Dec 28 '18 at 10:34

score 0 · Accepted Answer · answered Dec 28 '18 at 10:41

0

Just adding to the @yurzui point, If you have multiple classes adding dynamically, I would suggest using ngClass

<div class="general" [ngClass]="{'new': model.isNew, 'edited': model.isEdited}">

answered Dec 28 '18 at 10:41

Sachila Ranawaka

31,266
5
51
75

I've considered it, but being a matter of taste, I prefer the `[class]` way. Thanks anyway! – LppEdd Dec 28 '18 at 10:51

score 0 · Answer 2 · answered Dec 28 '18 at 10:46

0

You can try following ways of assigning class

Try ngClass from Official Documentation
If you want to use some conditional way to apply classes, check out this answer

answered Dec 28 '18 at 10:46

Abhishek Gangwar

1,780
15
24

Applying classes in Angular templates

2 Answers2