@HostBinding('disabled') not working with Angular material 12

A custom directive ...

@Directive({
selector: '[myDirective]',
})
export class MyDirective {

@HostBinding('disabled')
disabled = true;

constructor() { }

@Input('myDirective')
set myData(data: string[]) {
this.disabled = someDirectiveLogic(data);
}

// ...
}


... has some specific logic to disable a button. When using the directive on a plain HTML button:

<a mat-raised-button color="accent"
[disabled]="system.selection.length === 0"
>View</a>

<button color="accent"
[myDirective]="system.selection"
>Pause</button>


The directive works well:

• No selection, disables the button on the right:
• Selecting data, enables the button the right:

When adding the mat-raised-button property on the Pause button with Angular Material v12, the button always shows as enabled:

The same code works well with Angular Material v6.3, the disabled attribute set by directive will render well in combination with mat-raised-button.

Cannot we use @HostBinding('disabled') with Angular material 12 ?

Continue reading...