1

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>
Vega
  • 27,856
  • 27
  • 95
  • 103
Baktha
  • 13
  • 6

1 Answers1

0

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

Vega
  • 27,856
  • 27
  • 95
  • 103
  • It can be set with ngClass, [class], ::ng-deep, in style.css, etc, etc... in case you need a class, not just color change – Vega Mar 27 '19 at 04:23
  • thanks. The above one is working. But I am using 20 check boxes. So i am writing this for all the check boxes. Is there any way to add in typescript as "if checkbox is checked" the mat card background needs to be changed. – Baktha Mar 27 '19 at 06:34
  • Also the above one is working in check boxes. Also i need to add this for radio buttons. for radio buttons it is not working – Baktha Mar 27 '19 at 06:42
  • please check in the above link(I have added screenshot) – Baktha Mar 27 '19 at 06:46
  • You can have an array for the ngmodel, put everything in ngFo Could you please give me an example – Baktha Mar 27 '19 at 06:46
  • Here you go : stackblitz.com/edit/angular-2qatha-qurq9a – Let me try the above one. Thanks a lot – Baktha Mar 27 '19 at 06:50
  • And i suppose to change icon for each card and mat card content also – Baktha Mar 27 '19 at 06:52
  • If you just need to change color on click, no need for a checkbox or radio button, check out this: https://stackblitz.com/edit/angular-2qatha-gebkpz – Vega Mar 27 '19 at 10:04