0

I have a div with a class baz. If a condition is fulfilled, an additional class should be applied to it named qux. Right now I'm doing it so:

<div [class]="(bar == 'foo')?'baz':'baz qux'">

I'd like to know if there's a better solution, as this one can get quite redundant for elements having not only one (baz) but multiple default classes. In that case, all those default classes must be written twice in the code.

Improve this question
6
  • 1
    you can use [ngClass] instead of class! Commented Sep 21, 2017 at 13:13
  • Im really curious as to why one would need to add multiple classes to an element in Angular 4. Commented Sep 21, 2017 at 13:14
  • @Pytth I'm probably not completely getting the point of Angular yet. I've just started to use it. Could you suggest maybe some useful relevant resources so I can learn why a single class is sufficient? Commented Sep 21, 2017 at 13:22
  • @tom Well, what is it you are trying to accomplish by adding a class? In Angular, most of the time adding a class is most useful for kicking off some visual change/animation. Commented Sep 21, 2017 at 13:28
  • 1
    @tom If that's the case, a simpler approach would be for the element to start with all the classes it needs for the "look" you seek, along with an extra one that effectively resets the properties set by the other classes. When you want the element to have the "look," remove the "reset" class. Commented Sep 21, 2017 at 15:00
Related questions
1096
Angular HTML binding
649
CSS Selector that applies to elements with two classes
515
How to assign multiple classes to an HTML container?
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.