How to position Angular Material radio buttons at the left and the right of the screen?

Question

While using Angular Material radio buttons, I wanted to make them in 2 directions -> 2 at the left of the screen and 2 at the rightmost of the screen.

Inside an accordion I have 4 radio button options of which I want to position 2 at the left and 2 at right most.

I am using the mat-radio-button to accomplish this. In the below code I have got the buttons on the left, but want to position a few more on the right, like in the image attached below.

<mat-accordion>
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
    <mat-expansion-panel-header>
      <h3 class="m-portlet__head-text">
        Basic Details
      </h3>
    </mat-expansion-panel-header>
    <div class="m-form m-form--fit m-form--label-align-right m-form--group-seperator">
      <div class="m-portlet__body">
        <div class="form-group m-form__group row">
          <div class="m-radio-list">
            <mat-radio-group class="example-radio-group" (change)="changeComboo($event)" [(ngModel)]="choosePolicyType">
              <p>
                <mat-radio-button class="example-radio-button" *ngFor="let pType of policyTypes" [value]="pType">
                  {{pType}}
                </mat-radio-button>
              </p>
            </mat-radio-group>
          </div>
        </div>
      </div>

      <div *ngIf="choosePolicyType=='Individual'">


        <div class="form-group m-form__group row">
          <div class="col-lg-6">
            <mat-form-field appearance="outline">
              <mat-label>First Name</mat-label>
              <input matInput placeholder="">
            </mat-form-field>
            <label class="col-lg-2 col-form-label"></label>

            <mat-form-field appearance="outline">
              <mat-label>Last Name</mat-label>
              <input matInput placeholder="">
            </mat-form-field>
          </div>

        </div>

component.ts, where the contents of the radio button is defined:

choosePolicyType: string;  
policyTypes: string[] = ['Individual','Business'];

Radio button positioning:

Narcose

You forgot to attach an image. Anyway maybe checkout Bootstrap's flexbox utility classes. – Clisthenes

@JonathanWilson, Thanks have attached the image now – Narcose

@JonathanWilson, could i use the bootstrap flex classes with angular material? – Narcose

Yes, why not? You're already mixing those two libraries – Clisthenes

You could also just use the float-right Bootstrap class – Clisthenes

Answer 1

You can try to use a flexbox and group two by two the buttons. Something like this:

CSS:

.mat-radio-group{
  display:flex ;
  width:100%;
  font-size:0.5em;
  justify-content: space-between;
}

HTML:

<mat-radio-group class="myGroup">
    <span class="group1">
       <mat-radio-button value="1">Option 1</mat-radio-button>
       <mat-radio-button value="2">Option 2</mat-radio-button>
    </span>
    <span class="group2">
       <mat-radio-button value="3">Option 3</mat-radio-button>
       <mat-radio-button value="4">Option 4</mat-radio-button>
     </span>
</mat-radio-group>

DEMO

---

You can customise mat-radio-button style as the following:

mat-radio-button:nth-child(3){
   float:right
}

mat-radio-button:nth-child(4){
   float:right
}

This will push options3&4 to the right and create a gap between two group of buttons.

DEMO

---

Gamopetalous

I can't see the demo on my phone but I imagine justify-content: space-between would yield a nice arrangement. – Clisthenes

@Vega, Hey for the template that i have been using this flex alignment is not working, any idea about the possible issue – Narcose

@Vega, i have been using the same html and css and ts files on my project folder, havnt made any change, not working yet, not quite sure how i could update the demo, would it be related to the template or something? how else could i share it with you. – Narcose

@Vega, thanks a lot for the assistance, but still not working here in my template, it is just the css affecting the radio button alignment or something else along with it? – Narcose

Yes, it's only css based. look inside of your styles.css along with the component.css if there are other styles applied to radio buttons in general. Look for any style collision – Gamopetalous

@Vega, Thanks a ton would check into it and get back to you if any doubts in between. – Narcose

@Vega, since it is angular material could i use any of its feature?, do you know any of it, like there is for flex that you helped me with, is there some tag in angular material that could help? – Narcose

@Vega, thanks it was an issue with my file that it was not reading the css file – Narcose

@Gamopetalous and how could i keep the 1st radio button of the 2 types defaulted? Like if the option 1 from the left and option3 from right section and once both are selected the fields accordingly will be displayed. – Narcose

Like in this link i am attaching here, what i want to accomplish is that as soon as my page loads the 2 options 1 & 3 are selected and since they both are selected they display the fields, but im trying this here and it is not happening could you please help me with it @Vega, stackblitz.com/edit/angular-azz4r8-aphlmu – Narcose

@Gamopetalous Hey not able to share the edited page, so added images of the edited code at ur demo code, please check and let me know, thanks – Narcose

@Gamopetalous Yes yes the post above/soln above is totally fine but the problem is i wanted to accomplish the selections via the ts file and i want to have 2 radio buttons selected as soon as the screen loaded and also to manage this via the ngif – Narcose

Ok, I think I see, that should be something like this? stackblitz.com/edit/angular-azz4r8-dvtyfb or stackblitz.com/edit/angular-azz4r8-myno48 – Gamopetalous

@Gamopetalous Hey thanks that is totally fine, but another part of it i wanted to address, after selection of the 2 how do i give a condition that if option1 && option3 are selected then it should display a field first name, and if option 1 & option4 are selected it should display the last name filed, and then same with option 2&3 then 2&4... – Narcose

@Vega, this is how i have added the options in the ts file, but the soln you have given is not working for me, sorry but what could be the issue? policyTypes1: string[]=['opt1','opt2']; policyTypes2: string[]=['opt3', 'opt4','opt5']; – Narcose

Its like for the 2 options selected it should show the respective fields, if 1&3 then a few fields, if 1&4 selected a few fields if 1&5 then other and if 2&3 another and so on, but by default as soon as the screen opens up the 1and 3 should be delfault selected and the fields to be displayed – Narcose

@Vega, sorry but could you find out on it? – Narcose

Solution worked for me with some changes, thank you – Kep