I've been wondering if there's a simpler way to customize the appearance of a disabled button using Angular Material.
Currently, I achieve this by utilizing an ng-container and ng-template. While this method gets the job done, the code is not very concise because the primary difference between the two buttons is just the presence of class="disabled", which should only be applied when the button is disabled. I understand that there are other distinctions as well, but those are related to attributes like (click) for the enabled button which are irrelevant in the disabled state. Similarly, having the disabled property on the enabled button serves no purpose.
<ng-container *ngIf="disabledNext; else next">
<button mat-button class="disabled" type="button" [disabled]="disabledNext">
Next
</button>
</ng-container>
<ng-template #next>
<button mat-raised-button (click)="nextDate()" type="button">
Next
</button>
</ng-template>
I'm seeking a solution similar to this approach, but I am unsure if it is feasible
<button mat-button-raised class="disabledNext ? disabled : ''">Next</button>
OR some form of CSS selector that can target buttons with the disabled property set to true
button.disabled { ... }