Label

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

Creating Label

HTML

<!-- 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> 

TypeScript

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

@Component({
    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