Conditional button attributes

Ionic Framework ionic-v3
1

Hi,

I’m trying to conditionally apply an attribute based on whether a function returns true or false like so:

`<button [attr.secondary]=“isBoosted() ? ‘’: null” full large (click)=“boost()”>

Boost

`

The function isBoosted() returns true, and the attribute is inserted as I’d expect, but the classes that go with the attribute aren’t added so the button doesn’t change colour.

Is this a bug or am I doing something wrong?

Thanks for any help

2

It works if I change it to use class rather than attribute like so:

`<button [class.button-light]="!isBoosted()" [class.button-secondary]=“isBoosted()” full large (click)=“boost()”>

Boost

`
3

I’d be happy to know how to conditionally add the attribute directly rather than the class. Did you figure it out?

4

I have it working like this:

<button [outline]="selectedBell.away" class="i-am-home-button">I Am Home</button>
<button [outline]="!selectedBell.away" class="i-am-out-button">I Am Out</button>

Now if I add a second attribute to the button, say ‘secondary’, the later is not taken into account if the expression for the outline attribute is true:

<button [outline]="selectedBell.away" secondary class="i-am-home-button">I Am Home</button>
<button [outline]="!selectedBell.away" secondary class="i-am-out-button">I Am Out</button>

So the button can have ‘outline’ and ‘secondary’ but ‘secondary’ alone.

Any clue?

1 Like
5

@gdeflaux I guess that the problem is related to the following issue:

6

This code don´t update the changes. It´s something wrong?

<ion-icon [attr.color]="cliente.estado == 'activo' ? 'success' : 'danger'" name='close' item-start></ion-icon>
7

No attr. Just [color].

8

Thanks @rapropos for the quick response.