CODEWITHSUNDEEP
angularangular-materialfrontend
Torjescu Sergiu
Torjescu Sergiu

Reputation: 1533

ngClass with multiple/different statements

I looked through similar questions but coudn't wrap my head around the solution I am looking for.

So basically I have this piece of code:

 <div class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
          [ngClass]="
            heading === 'Abrechenbare Buchungen' ? 'col-md-4' : ' col-md-3'
          "
        >
          {{ attendee?.lastName }}, {{ attendee?.firstName }}
        </div>

I would like to modify and add an extra statement. The logic will be if (heading === 'Abrechenbare Buchungen' or if heading === 'Kürzlich abgerechnete Buchungen') and attendee?.orderStatus == 'CANCELLED', then it should add the class 'text--line-through' to both col-md-3 and col-md-4.

I tried with "||" as I saw in other simialr questions but could't find a working solution, I wasn't writing the syntax correctly most probably.

Upvotes: 0

Views: 244

Answers (5)

khushi
khushi

Reputation: 178

Use function like this that will be good instead of messing up HTML

 <input type="text"  [class]="getAgeTextColor(form.get('ActiveAge').value)" class="form-control-plaintext" [ngClass]="{'form-control-plaintext': true}" formControlName="ActiveAge">

getAgeTextColor(ActiveAge){
  if(ActiveAge != null){
    const months = ActiveAge.split(' ')[0];
    if(months >= 24){
      return 'text-green';
    }else if(months > 12 && months < 24){
      return 'text-yellow';
    }else if(months <= 12){
      return 'text-red';
    }
  }else{
    return '';
  }
}

Upvotes: 0

Stanislav Dontsov
Stanislav Dontsov

Reputation: 1741

If you really want to keep it in the markup:

[ngClass]="{'col-md-4': heading === 'Abrechenbare Buchungen', 'col-md-3': heading !== 'Abrechenbare Buchungen', 'text--line-through': attendee?.orderStatus == 'CANCELLED'}"

Upvotes: 0

Manuel Panizzo
Manuel Panizzo

Reputation: 896

The angular best practices says that evit add logic in your HTML. move it to Ts.

Add in your ts a getter:

  get useColFour() {
    return (
      (this.heading === 'Abrechenbare Buchungen' ||
        this.heading === 'Kürzlich abgerechnete Buchungen') &&
      this.attendee['orderStatus'] == 'CANCELLED'
    );
  }

change your html:

<div class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
          [ngClass]="useColFour ? 'col-md-4' : ' col-md-3'
          "
        >
          {{ attendee?.lastName }}, {{ attendee?.firstName }}
        </div>

Upvotes: 1

mbojko
mbojko

Reputation: 14679

There's another way of declaring class. Like that:

<div
    class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
    [ngClass]="heading === 'Abrechenbare Buchungen' ? 'col-md-4' : ' col-md-3'"
    [class.text--line-through]="(heading === 'Abrechenbare Buchungen' || heading === 'Kürzlich abgerechnete Buchungen') && attendee?.orderStatus == 'CANCELLED'">
  {{ attendee?.lastName }}, {{ attendee?.firstName }}
</div>

Upvotes: 1

Julien Breem
Julien Breem

Reputation: 113

Assuming this html template is linked to an actual component, I'd suggest to create a method in the component that return the class, and just use it in your "ngClass" directive.

Upvotes: 0

Related Questions