Skip to content

Instantly share code, notes, and snippets.

@m-abs
Created March 10, 2017 14:38
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save m-abs/ff9da8ed6c01c5c5115da37e4b535a2a to your computer and use it in GitHub Desktop.
Save m-abs/ff9da8ed6c01c5c5115da37e4b535a2a to your computer and use it in GitHub Desktop.
Directive for NativeScript-angular, adding the property maxLines to Label
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;
}
}
}
@peppeg85
Copy link

peppeg85 commented Apr 1, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment