Angular Display 2 Cards Side By Side

Question

I have an Angular 5 website which is using routing.

In my code branch i have a folder which contains section with various data in them.

What i'm after doing is then having a main page display which ever sections i require which i have done but the issue is, is that because i have 2 component.html files nested in one it displays my info section on individual lines.

I have tried:

• Wrapping them in DIV on the main page
• Float: left/right on the components and mat-card
• Setting widths

Personal details component html

  <mat-card>
    <mat-card-title class="firstCard">Personal details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invMumMaidenName" placeholder="Mother's maiden name" #mummaidenname value="Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invFirstSchool" placeholder="First school attended" #firstschool value="St.Testo" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

Contact details component html

  <mat-card>
    <mat-card-title class="secondCard">Contact details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPhone" placeholder="Telephone number" #tel value="01000 000 000" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invEmail" placeholder="Email address" #email value="[email protected]" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

** Main page component html **

<div>
   <app-personaldetails></app-personaldetails>
   <app-contactdetails></app-contactdetails>
</div>

Solution

You can use mat-grid or flex layout and for making it responsive use observableMedia
Example with mat-grid:

<mat-grid-list cols="2">
  <mat-grid-tile>
    <app-personaldetails></app-personaldetails>
  </mat-grid-tile>
  <mat-grid-tile>
    <app-contactdetails></app-contactdetails>
  </mat-grid-tile>
</mat-grid-list>

Comments

[murday1983]

I have tired adding <mat-grid-list cols="2"> to my Main Page Component but it still does use 2 columns <mat-grid-list cols="2"> <app-personaldetails></app-personaldetails> <app-contactdetails></app-contactdetails> </mat-grid-list>

[Prabhu Tiwari]

You are missing mat-grid-tile material.angular.io/components/grid-list/overview

[Prabhu Tiwari]

Should be <mat-grid-list cols="2"> <mat-grid-tile><app-personaldetails></app-personaldetails> </mat-grid-tile> <mat-grid-tile><app-contactdetails></app-contactdetails> </mat-grid-tile></mat-grid-list>