ngClass giving removal precedence #17092

Activity

1. jehugaleahsa commented on May 29, 2017

   

   jehugaleahsa

   on May 29, 2017

   Last edited by jehugaleahsa

   Author

   More actions

   "Why not just move the 'fa' out?", you might ask. Something like this: <span class="fa" [ngClass]="{'fa-thumbs-up': isPositive, 'fa-thumbs-down': !isPositive}"></span>. That would certainly solve the problem for some people.

   That makes sense when using the same condition, like isPositive in the example. But, consider this use case:

   You have a form and you want to use classes to indicate when the form is valid or invalid. However, prior to submitting the form, you don't want to apply any classes. You wouldn't want users to get blasted with validation errors the second they open the page. To support that, you create two boolean properties: isValid and isInvalid.

   public get isValid(): boolean {
       return this.form.submitted && this.form.valid;
   }
   public get isInvalid(): boolean {
       return this.form.submitted && this.form.invalid;
   }

   You use bootstrap4 to apply classes to a card, either card-inverse card-success or card-inverse card-danger. The card-inverse class actually turns the text white, making it impossible to see unless one of the other two classes are set. When you try the code below, you run into the issue I am describing:

   <div [ngClass]="{'card-inverse card-success': isValid, 'card-inverse card-danger': isInvalid}"></div>

   When valid, card-inverse is added then removed, and the text remains black on top of a green background, making it hard to see. If you try to move the card-inverse out into a class attribute, the text is always white, even on a white background.

   The workaround is to call a function; something like this:

   <div [ngClass]="getStatusClasses()"></div>

   private getStatusClasses(): string | null {
       if (this.isValid()) {
           return "card-inverse card-success";
       } else if (this.isInvalid()) {
           return "card-inverse card-danger";
       } else {
           return null;
       }
   }

   That works for now but that's a lot of overhead, also forcing class names into the typescript backend rather than in the HTML where I'd prefer it live.
2. tytskyi commented on May 29, 2017

   

   tytskyi

   on May 29, 2017

   More actions

   Don't you find that this

   <div [ngClass]="{'card-inverse card-success': isValid, 'card-inverse card-danger': isInvalid}"></div>
   

   already reads hard?

   IMO this reads more obvious:

   <div 
     [class.card-inverse]="isValid || isInvalid" 
     [class.card-success]="isValid" 
     [class.card-danger]="isInvalid"
   >
   </div>
   

   I think the only good use case for [ngClass] - is when you don't know classnames in advance and you want to generate them in runtime.

   👍React with 👍1Reacted by Travis Parks
3. jehugaleahsa commented on May 29, 2017

   

   jehugaleahsa

   on May 29, 2017

   Author

   More actions

   @tytskyi I definitely prefer that. It is a good way to keep the classes in the HTML, too.

   When I submitted this, I figured there are too many people using ngClass to change its behavior at this point. I figured I'd put this out there so others might come across it and benefit from alternative approaches like the one you just posted. Thanks!
4. ericmartinezr commented on May 29, 2017

   

   ericmartinezr

   on May 29, 2017

   Contributor

   More actions

   Relevant #5763 (comment)
5. vicb commented on May 30, 2017

   

   vicb

   on May 30, 2017

   Contributor

   More actions

   <div class="card-inverse" [ngClass]="{'card-success': isValid, 'card-danger': isInvalid}"></div>

   should also work
6. vicb

   closed this as completedon May 30, 2017
7. angular-automatic-lock-bot commented on Sep 11, 2019

   

   angular-automatic-lock-botBot

   on Sep 11, 2019

   More actions

   This issue has been automatically locked due to inactivity.
   Please file a new issue if you are encountering a similar or related problem.

   Read more about our automatic conversation locking policy.

   _{This action has been performed automatically by a bot.}
8. angular-automatic-lock-bot

   locked and limited conversation to collaborators on Sep 11, 2019