Алёна Хреновская

Допустим есть у нас сервис home.service.ts по которому нам приходит наш массив

public getElementData(): Observable<any[]> {
  return this._httpClient.get('api/test'); // any[]
}

HTML код берем из примера по ссылке

В компоненте home.component.ts объявляем 2 свойства и 1 метод который вызывается в OnInit

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource;

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource = new MatTableDataSource(res);
  });
}

либо

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource = new MatTableDataSource();

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource.data = res;
  });
}

Получаем в итоге такую картину:


Ну и ссылка с хорошим, всеохватывающим, примером (Angular 5.2 и rxjs 5.5) - stackblitz

Сортируем существующий массив с помощью moment.js:

arr.sort((a, b) => moment(b.date, 'DD.MM.YY') - moment(a.date, 'DD.MM.YY'));

Собираем отсортированный новый без помощи сторонних библиотек:

const newArr = arr
  .map(n => [ n, +n.date.split('.').reverse().join('') ])
  .sort((a, b) => b[1] - a[1])
  .map(n => n[0]);

А в чём проблема-то? Заводите переменную, которая отвечает за количества колонок, привязываете её к вашему mat-grid-list в качестве значения параметра cols, и меняете как вам там нужно. Примерно так.

Для этого необходимо использовать [overlapTrigger]="false"

Пример кода:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

Пример готовой реализации: