[SOLVED] How to add css to the mat-card background when mat-checkbox is checked which is inside the mat-card-content?

How to add css to the mat-card background when mat-checkbox is checked which is inside the mat-card-content?

I need to change the mat-card background color when the mat-checkbox is checked which is inside the mat-card-content

<mat-card class="checkboxselect text-center little-profile workspacetype">
    <mat-card-content>
        <mat-checkbox class="multipleselect"></mat-checkbox>
        <div class="workspacetypeimage">
            <i class="bgi bgi-certificate"></i>
        </div>
        <mat-card-actions>
            <h4 class="m-t-0 m-b-0 typetitle">Bidder Dashboard</h4>
        </mat-card-actions>
    </mat-card-content>
</mat-card>

Solution

There many ways to set the background. One of the ways that seems simple and comes to my mind is to use ngStyle, but you need to set an ngModel on the checkbox, or something similar so you can check its state:

<mat-card [ngStyle]="{'background': myModel? 'blue':'red'}" class="checkboxselect text-center little-profile workspacetype">
    <mat-card-content>
        <mat-checkbox [(ngModel)]="myModel" class="multipleselect"></mat-checkbox>
        <div class="workspacetypeimage">
            <i class="bgi bgi-certificate"></i>
        </div>
        <mat-card-actions>
            <h4 class="m-t-0 m-b-0 typetitle">Bidder Dashboard</h4>
        </mat-card-actions>
    </mat-card-content>
</mat-card>

demo