How to dynamically change the clickAction using Angular Material checkbox

I'm new to Angular and Angular Material, and I'm trying to dynamically change the clickAction of a checkbox.

My goal is to prevent the checkmark from appearing when a user clicks the checkbox if clickAction is set to noop.
If clickAction is set to check, the checkmark should appear when the checkbox is clicked.

However, my clickBtn() method doens't seem to update the clickAction. Could someone help me figure out what I'm doing wrong?

Thanks.

//app.component.html

<mat-checkbox [checked]="checked" (click)="clickCheckbox()">
    Checkbox text
</mat-checkbox>

<br /><br />

<button (click)="clickBtn()">Change clickAction</button>

//app.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import {
  MAT_CHECKBOX_DEFAULT_OPTIONS,
  MatCheckboxDefaultOptions,
} from '@angular/material/checkbox';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [
    {
      provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
      // useValue: { clickAction: 'check', color: 'accent' },
      useValue: { clickAction: 'noop', color: 'accent' },
    },
  ],
})
export class AppComponent {
  checked = false;
  config;

  constructor(
    @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) config_: MatCheckboxDefaultOptions
  ) {
    this.config = config_;
  }

  clickCheckbox() {
    console.log('checkbox is clicked');
  }

  clickBtn() {
    if (this.config.clickAction === 'noop') {
        this.config = { clickAction: 'check', color: 'accent' };
    } else if (this.config.clickAction === 'check' ) {
        this.config = { clickAction: 'noop', color: 'accent' };
    }
  }
}

This is the Angular Material checkbox documentation I'm using:

https://v17.material.angular.io/components/checkbox/overview

Instead of recreating the entire object, just update the respective property, then it seems to work.

clickBtn() {
  if (this.config.clickAction === 'noop') {
    this.config.clickAction = 'check' as any;
  } else if (this.config.clickAction === 'check') {
    this.config.clickAction = 'noop' as any;
  }
}

Full Code:

HTML:

<mat-checkbox [checked]="checked" (click)="clickCheckbox()">
  Checkbox text
</mat-checkbox>

<br /><br />

<button (click)="clickBtn()">Change clickAction</button>

TS:

import { Component, Inject } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import {
  MAT_CHECKBOX_DEFAULT_OPTIONS,
  MatCheckboxDefaultOptions,
} from '@angular/material/checkbox';

export interface Task {
  name: string;
  completed: boolean;
  color: ThemePalette;
  subtasks?: Task[];
}

/**
 * @title Basic checkboxes
 */
@Component({
  selector: 'checkbox-overview-example',
  templateUrl: 'checkbox-overview-example.html',
  styleUrl: 'checkbox-overview-example.css',
  standalone: true,
  imports: [MatCheckboxModule, FormsModule],
  providers: [
    {
      provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
      // useValue: { clickAction: 'check', color: 'accent' },
      useValue: { clickAction: 'noop', color: 'accent' },
    },
  ],
})
export class CheckboxOverviewExample {
  checked = false;
  config;

  constructor(
    @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) config_: MatCheckboxDefaultOptions
  ) {
    this.config = config_;
  }

  clickCheckbox() {
    console.log('checkbox is clicked');
  }

  clickBtn() {
    if (this.config.clickAction === 'noop') {
      this.config.clickAction = 'check' as any;
    } else if (this.config.clickAction === 'check') {
      this.config.clickAction = 'noop' as any;
    }
  }
}

Stackblitz Demo