title: conditional disable radio button in angular 2
body: <p>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.</p>
  
  <p>Angular 2, the following WORKS for checkboxes: </p>
  
  <pre><code>&lt;input *ngIf="isEdit === true"
         type="checkbox"
         (change)="onChange($event)" /&gt;
  
  &lt;input *ngIf="isEdit === false"
         type="checkbox"
         disabled
         (change)="onChange($event)" /&gt;
  &lt;span&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/span&gt;
  </code></pre>
  
  <p>However the same does NOT work for radio button:</p>
  
  <pre><code>&lt;input *ngIf="isEdit === true"
         type="radio"
         [name]="name"
         (change)="onChange($event)" /&gt;
  
  &lt;input *ngIf="isEdit === false"
         type="radio"
         disabled
         [name]="name"
         (change)="onChange($event)" /&gt;
  &lt;span&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The corresponding HTML:</p>
  
  <pre><code>  &lt;radio-button [id]="'Standard'"
                  [value]="standard"
                  [isEdit]="isEdit"
                  [groupName]="'choices'"
                  &gt; Standard - password contains at least 1 character from 3 of the character sets below.
    &lt;/radio-button&gt;&lt;br&gt;
    &lt;/div&gt;
    &lt;radio-button [id]="'Custom'"
                  [value]="custom"
                  [isEdit]="isEdit"
                  [groupName]="'choices'"
                  &gt; Custom
    &lt;/radio-button&gt;
  </code></pre>
  
  <p>The same screen has other controls responding to isEdit changing true/false so I know isEdit is being set properly.</p>
  
  <p>The relevant part of the component:</p>
  
  <pre><code>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&lt;ElementState&gt;;
    public InstanceId: string;
    constructor(private pagMgr: PageMgrService) {
      this.InstanceId = pagMgr.GetUniquePageId();
      this.BSubj = pagMgr.GetSubject();
      this.isEdit = false;
      this.disabled = false;
    }
  </code></pre>
  
  <p>Tried wrapping in span or div... haven't tried jumping off a bridge yet, but I'm close.
  Any ideas?  I appreciate your help.<br>
  Thanks in advance.</p>