CODEWITHSUNDEEP
htmlcssangulargridviewangular-material
TaZ AfroSoul
TaZ AfroSoul

Reputation: 41

How to build Grid layout menu item using Angular Material

sorry for the dumb question. I’m new here😅. Anyway, on to my issue. i am having trouble creating angular material menu with GRID VIEW, not that default LIST VIEW. I'm stuck and i don't even know where to start. Conventionally, to create material menu in angular component, you import material in your angular project and component then within component.html, you do this...

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

results to following view: List view menu

but what i want is GRID View menu, looking like this from Google

How can i implement that layout in Angular Material? thank you, your help would be much appreciated.

Upvotes: 2

Views: 1522

Answers (2)

TaZ AfroSoul
TaZ AfroSoul

Reputation: 41

GOT IT!! it is the combination of @'s answer and ::ng-deep declaration in the CSS on mat-menu's custom class. i.e.: component.html

<mat-menu #menu="matMenu" class="custom-grid-menu">
    {{grid contents eg. Icons etc}}
</mat-menu>

Then on component.css

::ng-deep .custom-grid-menu{
    width: 100px;
}

then whole thing turns out great.

Upvotes: 0

A G
A G

Reputation: 102

i think <mat-grid-list> is what you're looking for.

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
  <span>Redial</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-grid-tile>
<mat-grid-tile>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-grid-tile>

Upvotes: 1

Related Questions