Consider having a class structure like this:
export class ItemType{
readonly itemtype_id: number;
public name :string;
constructor(itemtype_id: number, name: string) {
this.itemtype_id = itemtype_id;
this.name = name;
}
}
Now, there is a separate component created as an editable label.
<div class="row">
<div class="col-xs-4">
<h4><span class="xvrfont padding">{{label}}</span></h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-5">
<div *ngIf="editing">
<input #editableField
[required]="required"
(blur)="onBlur($event)"
[name]="value"
[(ngModel)]="value"
[type]="type"
[placeholder]="label"
(keyup.enter)="onEnter()"
(mouseover)="$event.target.select()"
/>
</div>
<div *ngIf="!editing">
<h4 title="Click to edit" (click)="edit(value);" (focus)="edit(value);" tabindex="0" class="inline-edit">{{value}} </h4>
</div>
</div>
</div>
When using this component, the field should be editable based on whether the property is readonly. If the property is readonly, the field should not be editable; otherwise, it should be.
<app-editable-field [isEditable]={{**check if the property is readonly**}} label='Label" [required]="true" type="text"></app-editable-field>
Is there a simple way to determine if a property in a class is readOnly or private?