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 ?
