Как создать мегаменю на материале Angular 7

Question

Я использовал приведенный ниже код для создания панели инструментов и меню с использованием углового материала 7. У меня есть требование создать мегаменю из углового материала.

<mat-toolbar color="primary" class="example-toolbar">
    <mat-toolbar-row style="height: 28px !important;">
            <div class="div-center">
                <button mat-flat-button color="primary" [matMenuTriggerFor]="menu">
                    <mat-icon>directions_car</mat-icon>
                    Cars
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item>Item 1</button>
                    <button mat-menu-item>Item 2</button>
                </mat-menu>
            </div>
        </mat-toolbar-row>
</mat-toolbar>

Я ищу мега-меню, которое создается вот так https://mdbootstrap.com/docs/jquery/navigation/mega-menu/

Может кто-нибудь знает, как я могу создать мега-меню, как указано выше.

Answer 1

Угловой 2 Материал Настройка MD-меню

.mat-menu-panel .custom {
  background-color: darkgrey;
  border-radius: 0px;
}

https://github.com/angular/material2/issues/10322

Answer 2

Вам нужно немного настроить компонент mat-menu и создать свой собственный компонент, чтобы создать компонент мегаменю.

В противном случае прямой способ настройки с использованием материала отсутствует.

SIMPLE DEMO