binding toggles settings in angular

I created a component which is responsibility on user boolean settings,
I created a list of toggles, and their default values are taken from DB.
I meet a difficult when I tried to get the EDITED toggles to the TS file (from HTML)
what should I do:

<div class="container" dir="rtl" >
    <div class="row">
      <div class="col tb-text" >
        msg Type
      </div>
      <div class="col tb-text">
        send email notification ?
      </div>
    </div>
    <div *ngFor="let item of notificationsData">
        <div class="row tb-text">
            <div class="col">
              {{ item.NotificationMsgID}} 
              {{ item.NotificationMsgDescription}} 
            </div>
            <div class="col tb-text">
              {{ item.MailIsOn}} 
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="{{item.NotificationMsgID}}" [checked]=item.MailIsOn>
                <label class="custom-control-label" for="{{item.NotificationMsgID}}"></label>
              </div>
            </div>

          </div>
        </div>

        <button class="tb-button btn btn-primary btn-block" (click)="OnSubmit()"> SAVE settings </button>
    </div>```

Thanks

Source: Angular Questions