How to change angular-material radio-button components?

0
votes

I tried to change the component radio button by the css in my code but it doesn't seem to work.

The normal behavior of this component is to have the button on the left and the label on the right and i want to inverse this order. I want to have the label on the left and the button on extreme right of my parent composant.

The radio composant in my xxx.component.html looks like that:

<mat-radio-group
   class="radio-group"
   [(ngModel)]="model">
   <mat-radio-button class="radio-button" *ngFor="let element of list" [value]="element.Id">
        {{element.name}}
   </mat-radio-button>
</mat-radio-group>

The radio component in chrome looks like that:

<mat-radio-group class="mat-radio-group radio-group">
   <mat-radio-button class="mat-radio-button radio-button">
      <label class="mat-radio-label">
         <div class="mat-radio-container">...</div>
         <div class="mat-radio-label-content">...</div>
      </label>
   </mat-radio-button>
   ...
</mat-radio-group>

I tried to change the class "mat-radio-container" and put "left:100%!important" but it doesn't worked. It seems that i can't change the behavior of subclasses, if i change the classes radio-group or radio-button that i created, i can have an influence on the component but i can't change mat-radio-container or mat-radio-label-content per example.

All the test i made was in the xxx.component.scss

Is someone know how i can put this button on the right or how i can change the "subclasses" of this element only in this component ?

edit: I want the label to be aligned on the left of the parent div and button aligned to the right of the parent div, not label on the left and the button closed to the label.

2
cssangularsassangular-materialradio-button

2 Answers

0
votes

Since, "element.name" is just going to be the label for that particular radio button, Can you to put the interpolation

{{element.name}}

just left to the

<mat-radio-button>

tags, it seems to work, see the example for your reference,

Stackblitz example,

0
votes

So i found the solution with the help of Santa:

HTML:

          <mat-radio-group
            class="radio-group"
            [(ngModel)]="xxx">
                <div *ngFor="let element of list">
                    <div class="left-radio-button">
                        {{element.name}}
                    </div>
                    <div class="right-radio-button">
                        <mat-radio-button class="radio-button" [value]="element.id">                
                        </mat-radio-button>
                    </div>
                </div>
           </mat-radio-group>

CSS:

.left-radio-button {
  width:95%;
  display: inline-block;
}

.right-radio-button {
  width:5%;
  display: inline-block;
}