How to bind value to checkbox click event for patch request in Angular?

I'm working on an Angular 8 Web App where a setting in the DB is either true or false. I want to update that value using a toggle/checkbox element when the toggle is changed - i.e. the request is sent immediately.

I have narrowed my problem down to the fact that the property I am setting in the view via [ngModel]="selectedView" isn't being set when the patch request is sent, the patch isn't giving the toggle enough time to set the property.

How can I delay the event so that the selectedView property is set and then updates the object successfully? As in the network-tab shows an empty payload object.

I notice this works if I set a button alongside the toggle and let the event off from the button, rather than the toggle. But I think this is a little overkill for what I need the toggle for. Toggle then click button is pretty poor UX, to me.

nav_bar.component.html

    <li *ngIf="config">
        <p><small>Show Match Hub </small></p>
        <label class="switch">
            <input 
            type="checkbox"
            [(ngModel)]="selectedView"
            [checked]="config.hide_match === 1"
            (change)="config.hide_match = config.hide_match ? 1 : 0" value="hide_match"
            (click)="switchMatchHub(selectedView)"
            >
            <span class="slider"></span>
        </label>
    </li>

nav_bar.component.ts (click event)

selectedView: any;

switchMatchHub(){
    const updateView = {
      'hide_match': this.selectedView
    }
    this.configService.showMatch(updateView)
    .subscribe(
      response => {
        console.log(response);
      }
    )
 }

service.ts

showMatch(newConfig: any){
    return this.http.patch<{data: Config}>(this.configURL + '/' + this.id, newConfig)
    .pipe(
      retry(1),
      catchError(this.handleError),
    );
  }

Could I wrap the request in a TimeOut? or is that a little poor too? Does anyone have an idea of how this could work?