Purpose is to allow a button to change isEdit to true or false. On true, the controls are enabled (editable), but on false they are still visible only disabled.
Angular 2, the following WORKS for checkboxes:
<input *ngIf="isEdit === true"
type="checkbox"
(change)="onChange($event)" />
<input *ngIf="isEdit === false"
type="checkbox"
disabled
(change)="onChange($event)" />
<span><ng-content></ng-content></span>
However the same does NOT work for radio button:
<input *ngIf="isEdit === true"
type="radio"
[name]="name"
(change)="onChange($event)" />
<input *ngIf="isEdit === false"
type="radio"
disabled
[name]="name"
(change)="onChange($event)" />
<span><ng-content></ng-content></span>
The corresponding HTML:
<radio-button [id]="'Standard'"
[value]="standard"
[isEdit]="isEdit"
[groupName]="'choices'"
> Standard - password contains at least 1 character from 3 of the character sets below.
</radio-button><br>
</div>
<radio-button [id]="'Custom'"
[value]="custom"
[isEdit]="isEdit"
[groupName]="'choices'"
> Custom
</radio-button>
The same screen has other controls responding to isEdit changing true/false so I know isEdit is being set properly.
The relevant part of the component:
export class RadioButtonComponent implements AfterViewInit {
@Input() id: string;
@Input() checked: boolean;
@Input() disabled: boolean;
@Input() value: boolean;
@Input() isEdit: boolean;
@Input('groupName') name: string;
@Output('onChange') onChangeEvent = new EventEmitter;
BSubj: BehaviorSubject<ElementState>;
public InstanceId: string;
constructor(private pagMgr: PageMgrService) {
this.InstanceId = pagMgr.GetUniquePageId();
this.BSubj = pagMgr.GetSubject();
this.isEdit = false;
this.disabled = false;
}
Tried wrapping in span or div... haven't tried jumping off a bridge yet, but I'm close.
Any ideas? I appreciate your help.
Thanks in advance.