Directive for NativeScript-angular, adding the property maxLines to Label

label-max-lines.directive.ts

import { Directive, ElementRef, Input, OnInit, OnChanges } from '@angular/core';
import { Label } from 'ui/label';

@Directive({
  selector: '[maxLines]',
})
export class LabelMaxLinesDirective implements OnInit, OnChanges {
  @Input('maxLines') public maxLines: number = 1;

  public get nativeView(): Label {
    return this.el.nativeElement;
  }

  constructor(private el: ElementRef) {}

  public ngOnInit() {
    const nativeView = this.nativeView;

    if (nativeView instanceof Label) {
      nativeView.on(Label.loadedEvent, () => {
        this.applyMaxLines();
      });
    }
  }

  public ngOnChanges(changes: any) {
    if (changes.maxLines) {
      this.applyMaxLines();
    }
  }

  private applyMaxLines() {
    const nativeView = this.nativeView;

    const maxLines = Math.max(Number(this.maxLines) || 0, 1);

    if (nativeView.android) {
      nativeView.android.setMaxLines(maxLines);
    } else if (nativeView.ios) {
      nativeView.ios.numberOfLines = maxLines;
    }
  }
}

I ❤️ this Gist!

The only thing missing for me was an indication that text was cut off (an ellipsis '...' so to speak). So I added that to my fork.

hello, great job, but how can i apply this to a class of labels(maybe inside a list?) in vanilla js?
for example i have this list and want apply only to notification-description class:

                        <lv:RadListView.itemTemplate>
                            <GridLayout class="notification-container" columns="100,*" rows="150" backgroundColor="#ffffff">
                                <StackLayout col="0" row="0" class="day-stack">
                                    <Label class="notification notification-start-month" text="{{ eventStartMonth }}"/>
                                    <Label class="notification notification-start-day" text="{{ eventStartDay }}"/>
                                    <Label class="notification notification-start-month" text="{{ eventStartHour }}"/>
                                </StackLayout>
                                <StackLayout col="1" row="0" class="description-stack">
                                    <Label class="notification-title" text="{{ title }}"/>
                                    <Label class="notification-description" text="{{ description }}"/>
                                </StackLayout>
                            </GridLayout>
                        </lv:RadListView.itemTemplate>

thanks in advance!

hello, great job, but how can i apply this to a class of labels(maybe inside a list?) in vanilla js?
for example i have this list and want apply only to notification-description class:

I've almost no experience with NativeScript-core, so this is just a guess:

You could make a helper function for it and add a loaded-event.

function labelMaxLines(label, maxLines) {
    const maxLines = Math.max(Number(maxLines) || 0, 1);

    if (label.android) {
      label.android.setMaxLines(maxLines);
    } else if (label.ios) {
      label.ios.numberOfLines = maxLines;
    }
}

export function labelOnLoaded(args) {
  const maxLines = 2;

  labelMaxLines(args.object, maxLines);
}

<Label class="notification notification-start-month" text="{{ eventStartMonth }}" loaded="labelOnLoaded"/>

Great, it works, and thanks also to Eddy i added the ellipsis, here is the code in js:

function labelMaxLines(label, maxLines) {
    let line = Math.max(Number(maxLines) || 0, 1);

    if (label.android) {
        label.android.setMaxLines(line);
        label.android.setEllipsize(android.text.TextUtils.TruncateAt.END);
    } else if (label.ios) {
        label.ios.numberOfLines = line;
        label.ios.adjustsFontSizeToFitWidth = false;
        label.ios.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
    }
}

exports.labelOnLoaded=function(args) {
    let maxLines = 2;
    labelMaxLines(args.object, maxLines);
}

and the .xml

<Label class="notification-description" text="{{ description }}" loaded="labelOnLoaded"/>

thank you again!