Angular 7 responsive layout using Material Grid

Question

I'am setting up a web application, and i want to implement the mobile version with the responsivity.

I'm using Angular 7, and angular material 7.2.

<mat-grid-list cols="12">
  <mat-grid-tile  [colspan]="6">

    <h1 class="title">Title</h1>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h2 class="date">Date</h2>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h1 class="price">price€</h1>

  </mat-grid-tile>
</mat-grid-list>

I have one gridlist with 12 cols which contains 3 tiles :

A- 6 (6/12)

B- 3 (3/12)

C- 3 (3/12)

WEB

<-------- 12 -------->

AAAAAA BBB CCC

When i get the phone size i want to have : one gridlist with 12 cols which contains 3 tiles :

A- 12 (12/12)

B- 6 (6/12)

C- 6 (6/12)

MOBILE

<-------- 12 -------->

AAAAAAAAAAAA

BBBBBB-CCCCCC

Sorry for my english ;) Thanks

G. Tranter · Accepted Answer · 2019-01-17 15:15:01Z

11

In grid layouts, only ratios really matter (not actual column counts). In your case, the ratios between tile sizes doesn't change - the first tile is always twice as wide as the second and third tiles. So you can mathematically reduce your mobile layout to:

A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)

Now, the tile colspan values are the same for both layouts, the only difference is the number of columns. This makes it simpler to implement a responsive design, because you only need to change the cols value between 12 and 6.

Bind the cols value input to an expression:

<mat-grid-list [cols]="isMobile ? 6 : 12">...

Use CDK's Layout module to detect device changes:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {

  public isMobile: boolean = false;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ...
}

You can also customize the break point based on screen size:

breakpointObserver.observe([
  '(max-width: 599px)'
]).subscribe(result => {
  this.isMobile = result.matches;
});

edited Jan 17, 2019 at 15:15

answered Jan 16, 2019 at 17:32

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin Barbé Over a year ago

Thanks you , that 's perfect :)

Benjamin Barbé · Accepted Answer · 2019-01-17 09:10:37Z

0

To customise the breakpoint :

breakpointObserver.observe(['(min-width: 500px)'])

answered Jan 17, 2019 at 9:10

Benjamin Barbé

2712 gold badges4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular 7 responsive layout using Material Grid

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related