How to make checkbox disabled on condition in angular?

Question

previously i have used Boolean property to make checkbox disabled.

here is what i tried so far.

app.component.ts
---------------
 ReadOnly: boolean;

  ngOnInit() {
    this.ReadOnly = true;
  }

app.component.htmt
------------------
<input type="checkbox" [disabled]="ReadOnly">

{ 
         "id":1,
         "category":"cc",
         "sortOrder":"1",
         "active":"Y",
         "Products":[ 
            { 
               "id":100,
               "backEndName":"DDA",
               "sortOrder":"1",
               "active":"N"
            }
         ]
      }

Now i need to use active condition make field disable. how can i do the same?

Answer 1

Try like this:

<input type="checkbox" [disabled]="item.active == 'N'">

Answer 2

import {Renderer2} from '@angular/core';


constructor( public  htmlManipulator: Renderer2) {}

    radioButton(e) {
    if (e.target.checked) {
      this.htmlManipulator.setProperty(this.emilId.nativeElement, 'disabled', null);
    } else {
      this.htmlManipulator.setProperty(this.emilId.nativeElement, 'disabled', ' ');
      console.log('phone click');
    }

  }


    <input type="radio" value="email" name="group2" (change)="radioButton($event)">Email Id