Angular 5 Mat-grid list responsive
You may use the following directive if you need a reusable solution:
import { Directive, Input, OnInit } from '@angular/core';
import { MatGridList } from '@angular/material';
import { ObservableMedia, MediaChange } from '@angular/flex-layout';
export interface IResponsiveColumnsMap {
xs?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
}
// Usage: <mat-grid-list [responsiveCols]="{xs: 2, sm: 2, md: 4, lg: 6, xl: 8}">
@Directive({
selector: '[responsiveCols]'
})
export class ResponsiveColsDirective implements OnInit {
private countBySize: IResponsiveColumnsMap = {xs: 2, sm: 2, md: 4, lg: 6, xl: 8};
public get cols(): IResponsiveColumnsMap {
return this.countBySize;
}
@Input('responsiveCols')
public set cols(map: IResponsiveColumnsMap) {
if (map && ('object' === (typeof map))) {
this.countBySize = map;
}
}
public constructor(
private grid: MatGridList,
private media: ObservableMedia
) {
this.initializeColsCount();
}
public ngOnInit(): void {
this.initializeColsCount();
this.media.asObservable()
.subscribe((changes: MediaChange) =>
this.grid.cols = this.countBySize[changes.mqAlias]
);
}
private initializeColsCount(): void {
Object.keys(this.countBySize).some(
(mqAlias: string): boolean => {
const isActive = this.media.isActive(mqAlias);
if (isActive) {
this.grid.cols = this.countBySize[mqAlias];
}
return isActive;
});
}
}
I liked Altus answer, but I would like to have more breakpoints. So I've created a simple method with some breakpoints using FlexLayout ObservableMedia service instead of onResize:
import { AfterContentInit, Component, ViewChild } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { MatGridList } from '@angular/material';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent implements AfterContentInit {
@ViewChild('grid') grid: MatGridList;
gridByBreakpoint = {
xl: 8,
lg: 6,
md: 4,
sm: 2,
xs: 1
}
constructor(private observableMedia: ObservableMedia) {}
ngAfterContentInit() {
this.observableMedia.asObservable().subscribe((change: MediaChange) => {
this.grid.cols = this.gridByBreakpoint[change.mqAlias];
});
}
}
<span>Breakpoint: {{grid.cols}}</span>
<mat-grid-list #grid rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
<mat-grid-tile>6</mat-grid-tile>
<mat-grid-tile>7</mat-grid-tile>
<mat-grid-tile>8</mat-grid-tile>
</mat-grid-list>
See https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro
You have to set the cols
attribute of the mat-grid-list
dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list
render the 1-column version.
HTML:
<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
<mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>
TS:
ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}
onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}
Stackblitz demo here
Hope this helps!