Изменение порядка расположения Mat-Grid из-за определенной ширины

Question

Я хочу использовать Mat-Grid в своем проекте в качестве Grid Layout. Он гибкий и отзывчивый, как я хочу. Потому что коэффициент сжатия одинаков для всех блоков, как мне хочется. Но когда экран 425px (можно масштабировать в браузере дляПК или в мобильном устройстве) Я хочу видеть все поля в сетке как вертикальные, а не горизонтальные всегда. Как я могу это сделать? Другой вопрос: можно ли расставить этот промежуток между блоками?

Вот этот пример ниже васможно увидеть https://stackblitz.com/edit/angular-tekgya?file=app/grid-list-overview-example.html

Вот как это должно выглядеть на рисунке ниже, когда ширина 425px

Answer 1

Вы можете подписаться на событие window.resize, используя функцию rxjs fromEvent:

fromEvent(window, 'resize')
.pipe(
  map(event => (event.target as any).innerWidth),
  startWith(window.innerWidth)
).subscribe(width => {
  this.columns = width <= 425 ? 1 : 3;
});

и в своем html-файле присвойте cols свойству columns

<mat-grid-list [cols]="columns" rowHeight="2:2" gutterSize="10">

Такжеиспользуйте gutterSize для определения расстояния между элементами.

Пожалуйста, не забудьте отписаться от подписки window.resize.