I have a use case where I **MUST** use Angular to render my checkboxes along with their respective contents. The **ASK** is to restrict the user to only check one checkbox at a time(i.e. User should be able to check checkbox A & have check box B disabled, or vice versa).

I know I should use the '**ngIf**' directive. However, I am fairly new to Angular & I could use an expert advice:)

My code:

```
<div>

<input class="checkbox-input" id="checkbox-one" type="checkbox" />
<label class="custom-checkbox" for="checkbox-one">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox1.</span>
</label>

<input class="checkbox-input" id="checkbox-two" type="checkbox" />
<label class="custom-checkbox" for="checkbox-two">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox2.</span>
</label>

</div>

```

[CodePen Link](https://codepen.io/alex-moh/pen/mdqRJXz?editors=1100)