Angular Material remove mat-radio-container on condition

Question

i want to remove the css-class mat-radio-container if my switchcase pictureRadio is selected

i tried giving the radio-button an extra class and select it in the css like this:

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

but its not working. I also cant give it an id because it i get more than one of these. Also Also i need the vanilla mat-radio-container css-class for my other switchcase

this is my code

<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>

How can i make sure that my display: none; acctually gets through

You need something like this [Example](https://stackoverflow.com/questions/53944686/angular-6-how-to-hide-radio-circle-using-angular-material-and-use-ngstyle-for-c) ? — cvekaso, Feb 13 '20 at 12:51
@salesh I added the first css example code, but still the circles appear — Nikolai Kiefer, Feb 13 '20 at 13:37

coreuter · Answer 1 · 2020-02-13T16:29:25.323

The css you defined for .mat-radio-container-no-show is not working because of Angular's view encapsulation. You can either use ::ng-deep to force your style down or you could turn off view encapsulation for that component.

Be aware that turning view encapsulation off can have unwanted side effects, since all your styles in your component.style.css will be applied to all components (it's like using the global styles.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;
}

Here is a Stackblitz for you.

EDIT 3rd alternative: custom theme

You could also define a custom theme and use that for your pictureRadio group.

Note: To use custom themes, you need to use scss not css.

Add this to your global styles.scss..

// 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);
}

...and just use .custom (or what ever class name you want to use) whenever you want the .mat-radio-container to be set to display: none. As soon as you use that .custom class now, it will be applied to all mat-radio-containers inside that element where you applied .custom on.

Updated Stackblitz

I've explained a bit more about custom themes in this SO answer, in case that's something you're interested in.

Angular Material remove mat-radio-container on condition

1 Answers1

::ng-deep

ViewEncapsulation.None

EDIT 3rd alternative: custom theme