Custom radio button is not checked by default with ngmodel in angular4

Question

I have a below custom radio button in my html and with the ngmodel attribute the checked default property is not working. While removing the ngmodel it;s working fine.

<div class="col-md-3">
          <label for="type" name="type" class="form-label grey_label">Type</label>
          <div class="custom_toggle_btn">
            <div class="switch-field">
              <input type="radio" id="switch1_left" name="type" value="opt1" [(ngModel)]="type" checked>
              <label for="switch1_left">Option1</label>
              <input type="radio" id="switch1_right" name="type" value="opt2" [(ngModel)]="type">
              <label for="switch1_right">Option2</label>
            </div>
          </div>
        </div>

Any idea on this?

Answer 1

Removed checked property

 <input type="radio" id="switch1_left" name="type" value="opt1" [(ngModel)]="type">

and inside the component.ts make sure you have set type

this.type = "opt1";