Binding attribute to a function


#1

Hi all!
I need to bind an attribute to a function,in particular i want that my label needs to floating only if the platform is android.is it possibile? how? thanks in advice.Below the code.

<section #field display-name="Email" required email>
      <ion-item>
        <ion-label floating=platform.is('android')>Email</ion-label>
        <ion-input type="text" [(ngModel)]="email"></ion-input>
      </ion-item>
    </section>

#2

What you could do here is:

In your initializer you do as followed:

      if (platform.is('ios')) {
//yourcode here
      } else if (platform.is('android')){
//yourcode here
      }

In your HTML you got multiple options now as example you could add an ngHide or style=“display:none”, etc…

As example here Ill use style=“display:none”:

      if (platform.is('ios')) {
      document.getElementbyId('IOS').style.display = 'block';
      document.getElementbyId('ANDROID').style.display = 'none';
      } else if (platform.is('android')){
      document.getElementbyId('IOS').style.display = 'none';
      document.getElementbyId('ANDROID').style.display = 'block';
      }
<section #field display-name="Email" required email>
      <ion-item>
        <ion-label floating id="ANDROID" style="display:block">Email</ion-label>
        <ion-label id="IOS" style="display:none">Email</ion-label>
        <ion-input type="text" [(ngModel)]="email"></ion-input>
      </ion-item>
    </section>

What I am doing here is just showing the HTML Id object for the certain device as example if you are on android the ios ID will be hidden if you are on ios the android will be hidden. Simple
Note this method here is not very efficient but I am certain that it works


#3

thx man!but i don’t need this.
i need only to have an attribute to a particular platform.


#4

This doc’s might help.


#5

no bro.i don’t need to display or not an element, the description is clear.i need that an attribute (in this case floating) is “attached” to the element only in one platform(in my case android).


#6

Have two different labels, one that floats and one that doesn’t. Use ngIfs to display only the one relevant to the current platform.


#7

Yes,this might be a good solution.thanks man.
Maybe there is a better and faster way with binding?
I have done this:

section #field display-name="Email" required email>
      <ion-item>
        <ion-label [floating]="platform.is('android')">Email</ion-label>
        <ion-input type="text" [(ngModel)]="email"></ion-input>
      </ion-item>
    </section>

but i’have the following error:

can’t bind to floating since it isn’t a known property of ion-label

so i think i need to do something with the module.


#8

What version of Ionic are you running? I just checked, and the tsx code in the latest Ionic/core will allow you to do that. But it might not be the standard npm install yet.


#9

Sorry, they moved the Ionic 3 source code to a different link, I was looking at Ionic 4. The Ionic 3 label code is messier. You might have to treat floating like a directive instead of an attribute. I’d have to dig deeper to be sure, and, well, I don’t want to. Looks as though your current code (or something really close to it) will work in Ionic 4.


#10

You should be able to supply conditional attributes using this syntax: [attr.floating]="whatever"


#12

@Bboypluss: The Label should be only visible in Android? …no Label at all for IOS, correct? Just follow the explanations of @joshmorony… he will give you always the best solution!


#13

yes, it works!thanks