Angular change detection not working (child input)

I thought @input was supposed to set off the change detector when it is used? When I use the mask input to "disable" this component from a parent component, it just keeps spinning with mat-spinner. how do I get it to disappear when I set the input to false after setting it to true? We use this for displaying a loading screen when calling backend services which can take a second or 2 to respond. This was working when we did manual change detection and markAsChange, but I want to use auto change detection.

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
selector: 'cl-mask',
templateUrl: './cl-mask.component.html',
styleUrls: ['./cl-mask.component.css'],
changeDetection: ChangeDetectionStrategy.Default,
})
export class ClMaskComponent {
@Input() mask = false;

@Input() public set loadingIcon(value: boolean) {
this.loadingIconDisplayed = value;
this.setMessageText();
}

private _rawText: string | null | undefined = 'Loading';
@Input() public set text(value: string | null) {
this._rawText = value;
this.setMessageText();
}

private setMessageText() {
this.messageText =
(this._rawText || 'Loading') +
(this.loadingIconDisplayed ? '...' : '');
}

messageText = 'Loading...';
loadingIconDisplayed = true;
}


And the HTML

<div class="cl-mask__wrapper">
<ng-content></ng-content>
<div *ngIf="mask" class="cl-mask__inner-wrapper">
<div class="cl-mask__message-box">
<mat-spinner
*ngIf="loadingIconDisplayed"
class="cl-mask__spinner"></mat-spinner>
<span *ngIf="messageText" class="cl-mask__text">
{{ messageText }}
</span>
</div>
</div>

Continue reading...