How to add background to mat-card when mat-radio button is selected from within mat-card-content, using Angular Material?

Question

I need to add background to each mat card when the each radio button is clicked. background should apply only to the mat card corresponding to the mat-radio button clicked.

 <mat-card class="text-center little-profile workspacetype">
                <mat-card-content>
                  <div class="workspacetypeimage">
                    <i class="bgi bgi-contractsonly"></i>
                  </div>
                  <mat-card-actions>
                    <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
                  </mat-card-actions>
                </mat-card-content>
                <mat-radio-button value="1"></mat-radio-button>
              </mat-card>

 <mat-card class="text-center little-profile workspacetype">
                <mat-card-content>
                  <div class="workspacetypeimage">
                    <i class="bgi bgi-contractsonly"></i>
                  </div>
                  <mat-card-actions>
                    <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
                  </mat-card-actions>
                </mat-card-content>
                <mat-radio-button value="2"></mat-radio-button>
              </mat-card>

Answer 1

You can use ngClass to set the class which sets the relevant background color - the variable for ngClass is set by the radio buttons... starting with this code here ... make the following changes:

card-fancy-example.ts to be:

import { Component, Output } from '@angular/core';
import { MatRadioChange } from '@angular/material';

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {

  selectedChoice: string;
  choices: string[] = ['RedClass', 'YellowClass', 'BlueClass'];

  choiceChanged(event: MatRadioChange) {
    console.log(event.value);
  }

}

card-fancy-example.css to be:

.example-card {
  max-width: 400px;
}

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
}

.example-card, .workspacetype { margin:10px 0;}

.RedClass{ background: lightpink;}
.YellowClass{ background: lightyellow}
.BlueClass{background: lightblue}

card-fancy-example.html to be:

    <mat-card class="text-center little-profile workspacetype" [ngClass]='selectedChoice'>
  <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <div class="workspacetypeimage">
      <i class="bgi bgi-contractsonly"></i>
    </div>
    <mat-card-actions>
      <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
    </mat-card-actions>
  </mat-card-content>
  <mat-radio-group [(ngModel)]="selectedChoice" >
  <mat-radio-button class="example-radio-button" *ngFor="let item of choices" [value]="item" (change)="choiceChanged($event)">
    {{item}}
  </mat-radio-button>
  </mat-radio-group>
</mat-card>