How to set placement attribute of ion-label dynamically?


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?



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

And, label.ts and label.scss


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)
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…


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>

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


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…