CODEWITHSUNDEEP
nativescript
G.Huan
G.Huan

Reputation: 155

NativeScript - Change Label into TextView/TextField with a Button

I am learning to make an app in NativeScript (Angular 2). In my item page, I want to have a button so that when I press it, I can change Label into TextView/TextField for editing the information of the item.

I know that I can use editable in TextView but I still want to know if it is feasible to have the button with that functionality. Thank you !!

item.component.html:

<StackLayout>
    <Label class="h3" text="Name: {{ item.get_name() }}" textWrap="true">
    </Label>
    <Label class="h3" text="Credit: {{ item.get_credit() }}"></Label>
    <Button class="btn" text="Edit" (tap)="change()"></Button>
</StackLayout>

<!-- After pressing the button -->
<StackLayout>
    <TextView class="h3" [text]="item.get_name()" textWrap="true">
    </TextView>
    <TextView class="h3" [text]="item.get_credit()"></TextView>
    <Button class="btn" text="Save" (tap)="change()"></Button>
</StackLayout>

Upvotes: 0

Views: 444

Answers (1)

Raven
Raven

Reputation: 2257

This can be done in many ways, but one common way is by changing visibility of control and binding it to a variable / property in the code behind.

in your component html:

Then on your component ts or code-behind you can handle it in the change method:

class MyComponentSample {
   isLabelMode: boolean = true; // Set to true if you want label to show by default or false if TextView as default

   change() {
      this.isLabelMode = !isLabelMode; // Basically you are toggling the mode here.
   }
}

Upvotes: 1

Related Questions