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>

Check this answer https://stackoverflow.com/a/55856563/11812564 — Saad Abbasi, Mar 18 '21 at 19:27

score 0 · Answer 1 · answered Mar 18 '21 at 20:33

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
}

Please also describe how can i enable or disable on option selection... — Esdras, Mar 19 '21 at 19:23

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

1 Answers1