optimize css on dropdown buttons that uses ngIf - html

Question

I have a dropdown that at the moment exists of one button. I would like this button to be disabled and that the color changes when it is disabled. I created this behaviour already with the code underneath.
Can't this be written cleaner? Because now I actually create 2 buttons but only one is seen..
I have tried this but I get stuck when adding the css background-color in the button code.
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<div *ngIf="checkIfValidVersion()">
<button class="dropdown-item js-swal-confirm" (click)="createMajors()">Create major version</button>
</div>
<div *ngIf="!checkIfValidVersion()">
<button [disabled]="!checkIfValidVersion()" style = "background-color:grey; color:black" class="dropdown-item js-swal-confirm">Create major version</button>
</div>
</div>
</div>
</div>

Answer 1

Ok, what you have to do is write a styling class for your button that will take effect if the button is disabled
Something similar to this will do the trick:
.my-button:disabled {
background-color: grey;
color: black
}
and your HTML will look like this:
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<button class="dropdown-item js-swal-confirm my-button" (click)="createMajors()"
[disabled]="!checkIfValidVersion()">Create major version</button>
</div>
</div>
</div>
Related topic here

Answer 2

<button class="dropdown-item js-swal-confirm" [class.disabledStyle] ="!checkIfValidVersion()"> Create major version </button>
The above code will add a class name "disabledStyle" to the existing class if the function returns true.
disabledStyle {
background: grey;
}

Answer 3

You are duplicating the code. You just require one line which is already there. Based on condition it will put disable attribute in your button. Do not put css code at button level.
<button [disabled]="!checkIfValidVersion()" class="dropdown-item js-swal-confirm">Create major version</button>
Now put css at button level for disable scenario:
button[disabled=disabled], button:disabled {
background-color:grey;
color:black;}
This is most cleaner way.