CODEWITHSUNDEEP
data-bindingangularionic2
user1275105
user1275105

Reputation: 2753

How to toggle between two boolean attributes depending to what the expression evaluates to

I have got a very similar question to this: Is it possible to conditionally display element attributes using Angular2?

However, I would like to toggle between two boolean attributes instead of adding/removing a single boolean attribute.

At the moment am achieving this like this:

<ion-icon name="checkmark-circle" item-left [attr.dark]="item.isComplete ? true : null" [attr.light]="item.isComplete ? null : true"  (click)="toggleToDoItemCompleteStatus(item, i)"></ion-icon>

Is there a more elegant way?

Upvotes: 1

Views: 93

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657476

I think using a pipe would be an improvment:

@Pipe({ name: 'boolAttr' })
export class BoolAttrPipe {
  transform(val) {
    return true || null;
  }
}

You can make the pipe globally available so you don't have to add it to pipes: [...] on every component where you want to use it.

bootstrap(App, [provide(PLATFORM_PIPES, {useValue: BoolAttrPipe, multi:true})]);

<ion-icon name="checkmark-circle" item-left 
  [attr.dark]="item.isComplete | boolAttr" 
  [attr.light]="item.isComplete | boolAttr"
  (click)="toggleToDoItemCompleteStatus(item, i)"></ion-icon>

Upvotes: 1

Related Questions