🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

NativeScript Angular

Text View

The TextView component can be used to type large text in your app. The component can also be used show any content by setting the editable property to false.

Basic Text View

HTML

<Button [text]="buttonText" class="btn btn-primary btn-active" (tap)="disableTextView()"></Button>
<Button text="Show text" class="btn btn-outline btn-active" (tap)="showText()"></Button>
<StackLayout class="input-field">
    <Label text="Enter text:" class="label"></Label>
    <TextView [(ngModel)]="tvtext" hint="Enter some text" [editable]="editState"
        class="input input-border"></TextView>
</StackLayout>

Disable/Enable edit TextView

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./basic-text-view.component.html"
})
export class BasicTextViewComponent {

    public editState = true;
    public tvtext = "";
    public buttonText = "Disable editting of TextView";

    disableTextView() {
        if (this.editState) {
            this.editState = false;
            this.buttonText = "Enable editting of TextView";
        } else {
            this.editState = true;
            this.buttonText = "Disable editting of TextView";
        }
    }

    showText() {
        alert("Text: " + this.tvtext);
    }
}

Improve this document

Demo Source


API Reference for the TextView Class

Native Component

Android iOS
android.widget.EditText UITextView