Как добавить фон к мат-карточке, когда радиокнопка мат выбрана из содержимого мат-карточки, используя Angular Material?

Мне нужно добавить фон для каждой карты мат, когда нажата каждая радиокнопка. фон должен применяться только к матовой карточке, соответствующей нажатой кнопке мат-радио.

 <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>
Источник

1 ответ

Ты можешь использовать ngClass установить класс, который устанавливает соответствующий цвет фона - переменная для ngClass устанавливается переключателями... начиная с этого кода здесь... внесите следующие изменения:

card-fancy-example.ts быть:

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 быть:

.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 будет:

    <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>
Источник
Другие вопросы по тегам