How to enable Item on click in Angular - html

Question

I have a list of subsections in my dialog container. I'm trying make all of them disabled when the dialog is open and only enabled selected subsection when the pencil icon is click for that subsection.
For example....
when user click subsection 1 pencil icon
Subsection 1 enabled
Subsection 2 disabled
Subsection 3 disabled. ....
and process will be the same for subsection 2 and 3. Any suggestion or help will be really appreciated.
<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
<mat-form-field appearance="fill">
<input matInput(ngModelChange)="nameChanged({newValue: $event,
isSection: false, id: subsection.id}
[(ngModel)]="subsection.sectionName">
</mat-form-field>
<button mat-icon-button color="primary"
(click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>
<button mat-icon-button (click)="openConfirmDialog(subsection, false)"
*ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>
TS
// THis is called when pencil icon is click
editDoc(value) {
this.subsectionToEdit = value;
this.refreshEditor = false;
}
// Delete Subsections
this.HelpService.deleteHelpSubsection(sec.id).subscribe(() => {
const index = this.mappedSections.findIndex((value) => value.id == sec.parentId);
if (~index) {
this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
}
})

Answer 1

You can try something like this
In the input bind the [disabled] attribute to a boolean, like I have below:
<p class="substyle">Subsections</p>
<div class="substyle" *ngFor="let subsection of section.subSections">
<mat-form-field appearance="fill">
<input [disabled] = "subsection.id !== selectedId" matInput style="width: 200px; height: 15px;" type="text"
(ngModelChange)="nameChanged({newValue: $event, isSection: false, id: subsection.id})"
[(ngModel)]="subsection.sectionName">
</mat-form-field>
<button mat-icon-button color="primary" matTooltip="Edit documents for this Subsection"
style="bottom: 10px;" (click)="editDoc(subsection)"> <mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="primary" matTooltip="Delete this
Subsection" (click)="openConfirmDialog(subsection, false)"
style="bottom: 10px;" *ngIf="isSubsection"><mat-icon>delete</mat-icon>
</button>
Then in your editDoc function, do the following:
editDoc(value) {
// make sure you make selectedId a property before doing this
this.selectedId = value.id // set the selectedId property to the selected value id
this.subsectionToEdit = value;
this.refreshEditor = false;
}
So what will happen is, whenever the selectedId is set, it will set all the inputs that don't belong to the selected subsection to disable automatically.