🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript Angular


The Label widget provides a text label that shows read-only text.


Creating Label


<!-- basic Label usage-->
<Label class="h3 p-15" text="Label (no binding)" textWrap="true"></Label>

<!-- Label with one-way binding -->
<Label class="h3 p-15" [text]="oneway" textWrap="true"></Label> 

<!-- Label with two-way binding -->
<Button class="btn btn-primary btn-active p-5 m-5" text="Change label text" (tap)="changeLabelText()"></Button> 
<Label class="h3 p-15" [text]="counter + ' times two-way label has been changed'" textWrap="true"></Label>
<Label class="h3 p-15" [text]="twoway" (textChange)="onTextChanged($event)" textWrap="true"></Label> 


import { Component } from "@angular/core";
import { EventData } from "tns-core-modules/data/observable";
import { Label } from "tns-core-modules/ui/label";

    moduleId: module.id,
    templateUrl: "./creating-label.component.html"
export class CreatingLabelComponent {

    public oneway = "One way bound label";
    public twoway = "Two way bound label";
    public counter: number;

    constructor() {
        this.counter = 0;

    changeLabelText() {
        this.twoway += " Two way bound label ";
        this.counter += 1;

    onTextChanged(args: EventData) {
        let label = <Label>args.object;
        console.log("onTextChanged for " + this.counter + " times for element " + label);

Improve this document

Demo Source

API Reference for Label Class

Native Component

Android iOS
android.widget.TextView UILabel