Você pode usar o Material Grid List, para fazer um layout de colunas de forma responsiva em conjunto com o Angular Flex Layout, mas você vai precisar de um pouco de código.
TL;DR; Va para o link de referência, em inglês, mais detalhado que o exemplo abaixo.
O Angular Flex Layout utiliza breakpoints para detectar o tamanho da tela:
- xs - max-width: 599px;
- gt-xs - min-width: 600px;
- sm - min-width: 600px; max-width: 959px;
- gt-sm - min-width: 960px;
- md - min-width: 960px; max-width: 1279px;
- gt-md - min-width: 1280;
- lg - min-width: 1280px; max-width: 1919px;
- gt-lg - min-width: 1920px;
- xl - min-width: 1920px; max-width: 5000px;
Você pode usa-los para definir um layout, fxLayout
, em linhas(row
) ou colunas(column
), ou mesmo visibilidade de objetos com fxShow
e fxHide
, como abaixo:
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="center stretch" class="row-example">
<div>1</div>
<div>2</div>
<div>3</div>
<div fxShow="true" fxHide.xs="true"></div>
</div>
No codigo angular de seu componente, para detectar os breakpoints, você precisa de um serviço chamado ObservableMedia
, que é instalado com o pacote Angular Flex Layout, abaixo os passos seguido de um exemplo:
$ npm install @angular/flex-layout --save
Você precisa importar o modulo no seu app.module
:
...
import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule
],
declarations: [ App ],
bootstrap: [ App ]
})
Então nos componentes que desejar utilizar o layout responsivo, você precisa injetar o serviço ObservableMedia
. No exemplo abaixo, usando o mat-grid-list
, podemos usar o ObservableMedia
para definir quantas colunas são exibidas por linha:
HTML
<mat-grid-list [cols]="cols | async" gutterSize="16px">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
</mat-grid-list>
TS
public cols: Observable<number>;
constructor(private observableMedia: ObservableMedia) {}
ngOnInit() {
const grid = new Map([
["xs", 1],
["sm", 2],
["md", 2],
["lg", 3],
["xl", 3]
]);
let start: number;
grid.forEach((cols, mqAlias) => {
if (this.observableMedia.isActive(mqAlias)) {
start = cols;
}
});
this.cols = this.observableMedia.asObservable()
.map(change => grid.get(change.mqAlias))
.startWith(start);
}
No código acima no map
grid
, são definidos os Media Query Alias, maAlias, que mapeiam os breakpoints dos tamanhos de tela, e associa os mesmos ao numero de colunas desejados.
Em ngOnInit
, inicialização do componente, detectamos qual breakpoint está ativo para definir o numero de colunas inicial.
Por fim, inicializamos um Observable
para monitorar mudanças de tamanho de tela ativados pelo serviço ObservableMedia
, a cadas alteração, ajustamos o tamanho das colunas.
Fonte: https://brianflove.com/2017/05/03/responsive-angular/