Compact code for different lay out of disabled Angular Material buttons

I've been wondering if there's any easy way to change the lay out of a disabled button from Angular Material.

Right now, I do it using a ng-container and a ng-template. This works fine, but as you can see the code is not very compact because the only difference between the two buttons (in essence) is class="disabled" and this class should only be used if the button is disabled. I know there's more difference than just that but that's because I just removed (click) etc. for the disabled button since it isn't used anyway. Same goes for the disabled property on the non-disabled button, there's no point in having it.

                <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 looking for an answer along the lines of this but I'm not sure if that's possible

<button mat-button-raised class="disabledNext ? disabled : ''">Next</button>

OR some kind of CSS selector that works if the disabled property of the button is true

button.disabled { ... }