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

Question

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?

It gets the index passed in as a parameter and sets toDoitems[Indexthatwaspassedin].isComplete = !toDoitems[Indexthatwaspassedin].isComplete. By default it is false. — user1275105, Jun 13 '16 at 14:48
Parent tag is ion-list which has ngFor="let item of toDoitems; #i = index " — user1275105, Jun 13 '16 at 15:00
I probably don't really need to pass the index and just pass the item. But anyway, my question is about setting the attributes light(when item complete status is false) and dark (when item complete status is true) — user1275105, Jun 13 '16 at 15:12

Günter Zöchbauer · Accepted Answer · 2016-06-13T15:09:46.920

1

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>

edited Jun 13 '16 at 15:09

answered Jun 13 '16 at 12:48

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks but a doing this already. Only difference I abstracted my the click event code in toggleToDoItemCompleteStatus function. The bit am asking about is "... [attr.dark]="item.isComplete ? true : null" [attr.light]="item.isComplete ? null : true". It looks ugly to me and am asking if there is better way of writing this. – user1275105 Jun 13 '16 at 15:04
Thanks. this definitely an improvement. – user1275105 Jun 13 '16 at 20:19

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

1 Answers1