Angular Материал удалить мат-радио-контейнер при условии

Question

Я хочу удалить css -класс mat-radio-container , если выбран мой switchcase pictureRadio

Я попытался дать переключателю дополнительный класс и выбрать его в css вот так:

.mat-radio-container-no-show .mat-radio-container {
  display: none;
}

, но это не работает. Я также не могу дать ему идентификатор, потому что я получаю больше, чем один из них. Также Также мне нужен ванильный мат-радио-контейнер css -класс для моего другого распределительного шкафа

это мой код

<div *ngSwitchCase="'radio'" [formGroup]="form" class="mat-form-field--no-underline">
  <mat-radio-group [formControlName]="question.key" [id]="question.key" fxLayout="column">
    <mat-label style="margin-bottom: 5px; color: rgba(0, 0, 0, 0.54)" [attr.for]="question.key">{{question.label}}</mat-label>
    <mat-radio-button style="margin-right: 20px" color="primary"  *ngFor="let opt of question.options" [value]="opt.id">{{opt.value}}</mat-radio-button>
  </mat-radio-group>
  <mat-divider style="margin-bottom: 15px; margin-top: 10px; background-color: rgba(0, 0, 0, 0.42)"></mat-divider>
</div>

<div *ngSwitchCase="'pictureRadio'" [formGroup]="form" class="mat-form-field--no-underline">
  <mat-radio-group [formControlName]="question.key" [id]="question.key" fxLayout="column">
   <mat-label style="margin-bottom: 5px; color: rgba(0, 0, 0, 0.54)" [attr.for]="question.key">{{question.label}}</mat-label>
   <mat-radio-button  style="margin-right: 20px" class="mat-radio-container-no-show" color="primary"  *ngFor="let opt of question.options" [value]="opt.id"><img width="100px" src="../../assets/media/no_pictures/test_no_product_en.png"></mat-radio-button>
 </mat-radio-group>
<mat-divider style="margin-bottom: 15px; margin-top: 10px; background-color: rgba(0, 0, 0, 0.42)"></mat-divider>
</div>

Как я могу убедиться, что мой дисплей : нет; фактически проходит через

Answer 1

css, который вы определили для .mat-radio-container-no-show, не работает из-за Angular представления инкапсуляции . Вы можете либо использовать ::ng-deep, чтобы выключить свой стиль, либо отключить инкапсуляцию вида для этого компонента.

Имейте в виду, что отключение инкапсуляции вида может иметь нежелательные побочные эффекты, поскольку все ваши стили в вашем компоненте. style. css будет применяться ко всем компонентам (это похоже на использование глобальных стилей. css)!

:: ng-deep

/* component.style.css */

::ng-deep .mat-radio-container-no-show .mat-radio-container {
  display:none
}

ViewEncapsulation.None

// component.ts
import { Component, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  // ...
}

/* component.style.css */

.mat-radio-container-no-show .mat-radio-container {
  display: none;
}

Вот вам Stackblitz .

РЕДАКТИРОВАТЬ 3-й вариант: пользовательская тема

Вы также можете определить собственную тему и использовать ее для вашей группы pictureRadio.

Примечание. Чтобы использовать пользовательские темы, необходимо использовать s css, а не css.

Добавить это в глобальные стили.s css ..

// global styles.scss

/* Add application styles & imports to this file! */
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

/* CUSTOM THEMES */
@import '~@angular/material/theming';

// style specific component
@mixin my-custom-component($theme) {
  .mat-radio-container {
    display: none;
  }
}

// define default theme
$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-amber, A200, A100, A400);
$app-warn:    mat-palette($mat-red);

// define custom theme
.custom {
    $custom-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
    @include my-custom-component($custom-theme);
}

... и просто используйте .custom (или любое имя класса, которое вы хотите использовать) всякий раз, когда вы хотите, чтобы .mat-radio-container был установлен на display: none. Как только вы сейчас используете этот класс .custom, он будет применен ко всем контейнерам mat-radio внутри того элемента, к которому вы применили .custom.

Обновлено Stackblitz

Я объяснил немного больше о пользовательских темах в этом SO ответе , на случай, если вас это заинтересует.