Edit an input text in Angular - html

Question

I have a form in Angular with an input type text that I need to be able to edit by hitting the edit button.
I have 3 buttons, edit, cancel the change and save the change.
If the edit button is pressed, the input is enabled to be able to modify it, the edit button is hidden and the save and cancel buttons are shown.
If the cancel button is pressed, the change is canceled and the text that was initially displayed is shown and only the edit button is shown.
If the save button is pressed, the current changes are saved and replaced by the previous information, and only the edit field is shown again.
This is my html with a single input:
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<button class="btn"><i class="fa fa-pencil"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-save"></i></button>
How can I get this behavior on the page? What functions should I add in component.ts?

Answer 1

Have toedit = true in ur *.ts file
<div class="row g-0">
<div *ngIf="!toedit">
<label for=""> {{dataNew}} </label>
<div class="float-end">
<label><i class="fas fa-pencil p-1" (click)="toedit=!toedit"></i></label>
<label><i class="fas fa-minus-circle p-1" (click)="removeLabel(k)"></i></label>
</div>
</div>
</div>
<div class="row" *ngIf="toedit">
<div class="col-10 align-self-center">
<input type="text"/>
</div>
<div class="col-1 ms-1 align-self-center">
<label><i class="fas fa-check" [(ngModal)] = "dataNew" (click)="updateLabel(dataNew)"></i></label>
</div>
</div>
Have a try on this