Exploring the realm of angular development has sparked my interest, however, I found myself at a roadblock while reading through the documentation. The issue lies in figuring out how to declare a variable that can be reused effectively within nested HTML elements.
To address this challenge, I've implemented a workaround that gets the job done, but it feels like a messy solution. I'm eager to discover the correct approach to handling this situation.
In essence, I have an identifier called 'someProperty' that I wish to utilize in multiple locations within the nested HTML elements. This includes using it as the formControlName and passing it as an argument in function calls. Currently, I've resorted to utilizing *ngFor to define the 'x' variable for this purpose.
<div class="container-row" *ngFor="let x of ['someProperty']">
<span *ngIf="isReadOnly(x)" class="readonly-indicator"></span>
<span *ngIf="!isReadOnly(x)" class="writable-indicator"></span>
<mat-form-field>
<input matInput type="number" formControlName="{{x}}"
[readonly]="isReadOnly(x)"
(change)="onChange($event, x)"
placeholder="This is some Property!">
<mat-error *ngIf="!someFormGroup.controls[x].valid">ERROR!</mat-error>
</mat-form-field>
</div>