title: Angular: How can I dynamically change the disabled or visible property of an input type="radio" list?
body: <p>I need some guidance please.</p>
  <p><strong>Details:</strong> I have a list of radio buttons that is displayed using an <code>*ngFor</code> loop in Angular. I have a specific use case, where certain of the radio buttons should be disabled. How can I dynamically change the <code>[disabled]</code> property of an <code>input type=&quot;radio&quot;</code> list?</p>
  <p>This is my HTML:</p>
  <pre><code>  &lt;span
      class=&quot;form-check-inline radio-buttons-width&quot;
      *ngFor=&quot;let paymentInstructionType of paymentInstructionTypes&quot;
    &gt;
      &lt;label class=&quot;form-check-label fs-16&quot;&gt;
        &lt;input
          type=&quot;radio&quot;
          class=&quot;form-check-input&quot;
          name=&quot;paymentInstructionType&quot;
          ngModel
          [value]=&quot;paymentInstructionType&quot;
          [(ngModel)]=&quot;model.paymentInstructionType&quot;
          [disabled]=&quot;paymentInstructionType.defaultRegShow&quot;
          (ngModelChange)=&quot;modelChange('paymentInstructionType', $event)&quot;
        /&gt;
        {{ paymentInstructionType.description }}
        &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
      &lt;/label&gt;
    &lt;/span&gt;
  </code></pre>
  <p>This is a list of my radio buttons:</p>
  <pre><code>  paymentInstructionTypes = [
      { name: 'KeepYourSavingsWhereTheyAre', description: 'Keep Your Savings Where They Are', code: 'W9', defaultRegShow: true },
      { name: 'FullTransfer', description: 'Full Transfer', code: 'W3', defaultRegShow: true},
      { name: 'PartTransfer', description: 'Part Transfer', code: 'W5', defaultRegShow: true},
      { name: 'FullCash', description: 'Withdraw All My Savings', code: 'W4', defaultRegShow: true},
      { name: 'NoPaymentOption', description: 'No Payment Option Selected (Note: This option may only be selected if the member did not submit a claim form.)', code: 'Z', defaultRegShow: false }];
  </code></pre>
  <p><strong>I have tried using the below without luck:</strong></p>
  <pre><code>[disabled]=&quot;paymentInstructionType.defaultRegShow === 'true'&quot;
  [disabled]=&quot;paymentInstructionType.defaultRegShow === true&quot;
  [disabled]=&quot;paymentInstructionType.defaultRegShow&quot;
  </code></pre>
  <p>Ultimately I would like to dynamically set the [visible] and [disabled] properties dynamically as my data changes.</p>
  <p><strong>PLEASE NOTE:</strong> I am using <code>(ngModelChange)=&quot;modelChange('paymentInstructionType', $event)&quot;</code> that seems to disable the working of this code in my input: <code>[disabled]=&quot;paymentInstructionType.defaultRegShow&quot;</code>. When I remove the <code>(ngModelChange)</code> method call it works fine. Any suggestions?</p>