Angular 6: How to hide radio circle using Angular Material and use NgStyle for checked answer?

user_7431246 0
Viewed 4942

I'm having trouble with two things:

  1. Hide circles of mat-radio-group
  2. Change p tag background to blue if checked

I've tried using ::ng-deep to override css properties and change colors to white, tried to configure invisibility:hidden but none worked. Also, I tried to use ngStyle to configure that the background color of p tag will be blue if checked but it didn't work.

This is the HTML:

<div class="container-fluid">
  <header class="lesson-heading" *ngIf="currentQuestion">
    <span class="title"></span>
    <h2>Question {{currentIndex + 1}}/{{quiz.questions.length}}</h2>
  </header><!-- end lesson-heading -->
  <div class="question-block">
    <form #quizForm="ngForm" (ngSubmit)="onSubmit()">
      <h4>{{currentQuestion.question}}</h4>
      <div class="form-group">
        <mat-radio-group [(ngModel)]="userAnswers[currentIndex]" name="answer" class="form-control">
          <ul class="items answers-list">
            <li><mat-radio-button [value]=1><p>1. {{currentQuestion.answer1}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=2><p>2. {{currentQuestion.answer2}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=3><p>3. {{currentQuestion.answer3}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=4><p>4. {{currentQuestion.answer4}}</p></mat-radio-button></li>
          </ul>
        </mat-radio-group>
      </div>
    </form>
  </div>
</div>

And SASS files:

/*click effect color change*/
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element
  background-color: white !important
  visibility: hidden !important

/*inner circle color change*/
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle
  background-color: white !important
  visibility: hidden !important

/*outer ring color change*/
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle
  background-color: white !important
  visibility: hidden !important

1A. This is what I get now enter image description here 1B. And this is what I want enter image description here 2. This is what I want to get when radio is checked enter image description here

angular-material angular sass radio-button forms
1 Answers

There are some problems with your styles:

  • visibility: hidden will hide the contents of the element, but won't 'free' the space the element blocks

  • .mat-radio-outer-circle's visibility is set to hidden only if the option is checked due to .mat-radio-checked
  • an easier way to disable the ripple is to set disableRipple="true" on the mat-radio-button

1) How to hide the circles of the mat-radio-group and disable the ripple?

I've adjusted the styling like below:

::ng-deep .mat-radio-button .mat-radio-container {
  width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
  border: none;
  width: 0;
}

and added disableRipple="true" to the mat-radio-button

<mat-radio-button disableRipple="true" [value]="answer.value">

2) How to change the background if an option is checked?

To the background color of an option if it's checked, I've added the ngStyle attribute directive to the li elements and compared the index of the selected option with the value stored in userAnswers for the current question:

<li [ngStyle]="{'background-color':userAnswers[currentIndex] === i+1?'blue':'transparent'}"> ... </li>

In order for that to work, I've had to modify the html a bit (if you create your options in a loop you can save a few lines of code and it's easy to disable the ripple for all options at once):

<li class="answer" 
  [ngStyle]="{'background-color':userAnswers[currentIndex] === i+1?'blue':'transparent'}" 
  *ngFor="let answer of currentQuestion.answers; let i = index">

  <mat-radio-button disableRipple="true" [value]="answer.value">
    <p>{{ i+1 }}. {{ answer.text }}</p>
  </mat-radio-button>
</li>

Alternatively you could ngClass instead of ngStyle as well. Just add

[ngClass]="{'active': userAnswers[currentIndex] === i+1}"

to the li-element instead of the ngStyle directive and add the following style definition

.answer.active {
  background: lightblue;
}

Preview

Check out this Stackblitz which uses both variants (ngClass and ngStyle)

user_58186220
Related