How to set placement attribute of ion-label dynamically?

Ionic Framework ionic-v3
1

Hi there,

i am wondering if there is any possibility to set the ion-label placement attribute (floating, stacked or fixed) dynamically?
There doesn’t seem to be some property like [placement]="...", or is there?
I also tried to implement this via a custom directive with this.renderer.setElementAttribute(this.elementRef.nativeElement, "floating", "''"); on ngInit but this doesn’t seem to work either.

Any thoughts or ideas?
thanks…

2

See: https://github.com/ionic-team/ionic/blob/master/src/components/item/item.ts

  /**
   * @hidden
   */
  @ContentChild(Label)
  set contentLabel(label: Label) {
    if (label) {
      this._label = label;
      label.id = this.labelId;
      if (label.type) {
        this.setElementClass('item-label-' + label.type, true);
      }
      this._viewLabel = false;
    }
  }

And, label.ts and label.scss

3

Thanks for your reply.

If i didn’t get it wrong, to achieve this, one has to:
a) dynamically set/unset element class of parent ion-item to ‘item-label-’ + floating/fixed/stacked (because this is normally only done on change of the contentchild element)
AND
b) dynamically set/unset the attribute values for floating/fixed/stacked of the ion-label, as these only are evaluated in the constructor, but referenced as stylesheet selectors in the css.

I currently achieve the desired behavior with several simple ngIf statements like

<ion-label *ngIf="placement === 'floating'" floating>...</ion-label>
<ion-label *ngIf="placement === 'stacked'" stacked>...</ion-label>
<ion-label *ngIf="placement === 'fixed'" fixed>...</ion-label>

and was hoping to find a more elegant way than duplicating the entries…
But your proposed solution seems pretty much work for that simple task…

4

floating, stacked and fixed are Ionic provided CSS Utility Attributes specific to the label element.

Have you tried:

<ion-item [class]="itemClass">
  <ion-label [class]="labelClass">...</ion-label>
  <ion-input>...</ion-input>
</ion-item>

So that the [class] property binding passes the value of “itemClass” to the class property of the <ion-item> component.

1 Like
5

Does not work the desired way and has other negative side effects:

  1. as i already said one has to also bind [attr.floating]="placement === 'floating' ? '' : null" (and the same for fixed and stacked) because label.scss relies on these attributes.
  2. binding ion-item [class]="'item-label-' + placement" seems to brake other formgroup styles (disabled class is not set on disabled controls any more!)

so, i think i’ll sadly have to stick with the unhandy *ngIf approach as long as there is no bindable placement attribute…