Skip to content

Instantly share code, notes, and snippets.

@EddyVerbruggen
Forked from m-abs/label-max-lines.directive.ts
Last active November 22, 2023 06:13
Show Gist options
  • Save EddyVerbruggen/8232252e3a4667e7e20916279f98d3fc to your computer and use it in GitHub Desktop.
Save EddyVerbruggen/8232252e3a4667e7e20916279f98d3fc to your computer and use it in GitHub Desktop.
Directive for NativeScript-angular, adding the property maxLines to Label
// Usage: <Label maxLines="3" .. />
import { Directive, ElementRef, Input, OnInit, OnChanges } from '@angular/core';
import { Label } from 'tns-core-modules/ui/label';
declare const android, NSLineBreakMode: any;
@Directive({
selector: 'Label[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);
nativeView.android.setEllipsize(android.text.TextUtils.TruncateAt.END);
} else if (nativeView.ios) {
setTimeout(() => {
nativeView.ios.numberOfLines = maxLines;
nativeView.ios.adjustsFontSizeToFitWidth = false;
nativeView.ios.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
}, 0);
}
}
}
@Jafar-Al-Rashid
Copy link

HI @EddyVerbruggen,
Can you please explain how this directive can be used in a nativescript app?
I have saved this in my project and tried to use it but I cannot see any changes on the lables.

@RadouaneRoufid
Copy link

👍

@markosole
Copy link

Hi guys, did anyone rewrite this for pure js (not ng or typescript)? This is great but does not work for me :/
Same thing for @rudii1410

@anki247
Copy link

anki247 commented Jul 4, 2018

❤️
@EddyVerbruggen It works almost perfect...
But the Label node has the same height as before the truncating
Unfortunately NS does not have max-height :(
Any suggestion for this problem?

@Toq97
Copy link

Toq97 commented Sep 20, 2018

@anki247 i have the same issue, have you solved?

@itsnunolemos
Copy link

Hi @EddyVerbruggen, i am currently using this code. But i have to add nativeView.android.setSingleLine(false); before nativeView.android.setMaxLines(maxLines); otherwise it isn`t working

Me too

@huuthangdut
Copy link

❤️
@EddyVerbruggen It works almost perfect...
But the Label node has the same height as before the truncating
Unfortunately NS does not have max-height :(
Any suggestion for this problem?

using the sizeToFit() to adjust height of label
refer: https://developer.apple.com/documentation/uikit/uilabel/1620539-numberoflines

@mrcretu
Copy link

mrcretu commented Feb 3, 2020

❤️
@EddyVerbruggen It works almost perfect...
But the Label node has the same height as before the truncating
Unfortunately NS does not have max-height :(
Any suggestion for this problem?

using the sizeToFit() to adjust height of label
refer: https://developer.apple.com/documentation/uikit/uilabel/1620539-numberoflines

Man you're awsome, thank you so much for this suggestion.

@mrzanirato
Copy link

@huuthangdut or @mrcretu can show a code example for the sizeToFit() function please'
I tried but the label didn't change.
Thanks!
Marco

@jakoguta
Copy link

This works fine for me. Using NativeScript v8 and Angular v16. Thanks @EddyVerbruggen

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