Block and unblock the label to edit by clicking: Ionic - html

Question

I want something like as above shown image. When I click on the edit button then I should able to edit the label( A little about you label ) how can I do it.
<ion-item-divider>
<ion-label>Summary</ion-label>
<button ion-button clear item-end style="font-size:11px;color: #3BABE3;font-weight:bold;">Edit
<ion-icon name="ios-arrow-forward" class="arrow"></ion-icon>
</button>
</ion-item-divider>
<ion-item class="items">
<p style="color:grey;font-size:11px;">A little about you</p>
</ion-item>
The label should be blocked when I click on edit button it should be editable.
I'm assinging "A little about you" to a variable called summary.
<p style="color:grey;font-size:11px;">A little about you</p>
Actually this should be <textarea> instead of <p>

Answer 1

Try using the contenteditale atribute.
<ion-item class="items">
<p contenteditable="true" style="color:grey;font-size:11px;">A little about you</p>
</ion-item>
If you want to bind it to a variable you can do it like this:
<ion-item class="items">
<p [attr.contenteditable]="editable" style="color:grey;font-size:11px;">A little about you</p>
</ion-item>
Where editable is a boolean variable.

Answer 2

I had a similar need / code example and after a while I realized that asking users to edit your ion-label inline of the same view is basically a bad UX.
Consider making that button "edit" of yours to just spawn an alert controller which will contain input field. This is how I did it below and in my case I did not have a special "edit" button - users could click on a title to change its name. But I think you will get the way you can do it in your case
<ion-item *ngFor="let set of sets; index as i">
<button ion-button clear (click)="changeSetTitle( set.title, i)">
<h2>{{ set.title }}</h2>
</button>
<p>{{ set.length }} items</p>
<button ion-button icon-right clear item-end (click)="loadSetComponent(i)">
Manage
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-item>
And in ts file:
changeSetTitle(currentTitle, index) {
this.alertOn = true;
let alert = this.alertCtrl.create({
title: 'Change name:',
message: 'current: "'+currentTitle+'"',
inputs: [
{
placeholder: 'type in a new name'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
this.alertOn = false;
}
},
{
text: 'Confirm',
handler: data => {
if (data[0].length === 0) {
this.sets[index].title = currentTitle;
} else {
this.saveRequired = true;
this.sets[index].title = data[0];
}
this.alertOn = false;
}
}
]
});
// small trick to force focus onto alert (not working for iOS unfortunately.)
alert.present().then(() => {
const alertInput: any = document.querySelector('input.alert-input');
alertInput.focus();
return;
});
}