Conditionally/event-based enable/disable check box in angular9

Question

 <div ><label>Status:<select id="status" >
    <option >all</option>
    <option value="r">R</option>
    <option value="c">C</option>
    <option value="re">RE</option>
    <option value="de">DE</option>
  </select></label></div>    

how to enable or disable this check box conditionally or event-based in angular9 way (template directives etc) according to selection.

<label>CHECK:<input type="checkbox" id="check" /></label>

Answer 1

can you give us an example of what you are trying to do?

if you are using reactive forms, the answer provided by @Saad in the comment section looks like what you are looking for.

Otherwise, you might be looking for property binding, see here https://stackoverflow.com/a/37160409

in the html template you'd have something like this:

<label>CHECK:<input type="checkbox" id="check" [disabled]="isDisabled" /></label>

in the component typescript file, you'd have something like this:

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
export class ComponentOverviewComponent {
   isDisabled = false; // handle this variable to enable or disable your component
}