Angular Material Menu
⚡ Try it on StackBlitz!
Getting started
Installation:
Install via npm package manager
npm i ngx-mat-menu
Prerequisites:
npm i -s @angular/flex-layout
ng add @angular/material
Usage:
Inputs:
@ themeSidebar: Theme; // {background: 'white', color: 'black'}; @ themeHeader: Theme; // {background: 'white', color: 'black'}; @ arrMenuOptions: Array<MenuOptions>; // required. List of menu items. @ headerText: string; // required, Header text e.g. current user. @ headerIcon: string; // optional, Header icon next to header text. @ logoutIcon: string; // optional, lgout icon next to logout text. @ badgeColor: string; // optional, default is black, color of menu item selects @ srcLogo: string; // optional, logo at teh top line. @ heightLogo: string; // optional, height of the logo. @ widthLogo: string; // optional, width of the logo. @ lang: string; // optional default is en (see below in switch) @ visibleNotif: boolean; // optional, default is false/undefined, notification badge @ badge: number; // number of notifications @ defaultWidth: string; // default width of the menu sidebar @ colorSidebarHeader: string; // sidebar header text color @ borderHeader: string; // border style of the header line(top) @ borderSidebar: string; // border style of the sidebar(left) @ borderSidebarHeader: string; // border style of the sidebar header(left) @ borderSidebarFooter: string; // border style of the sidebar footer(left) @ borderMenuItems: string; // border style of the sidebar menu items(left) @ openNotif = ; // event on notifications click() @ logoutEvent = ; // event on logout click()
Module:
Import ngx-mat-menu
; @
HTML:
Add ngx-mat-menu
TypeScript:
;;;...themeSidebar: Theme;themeHeader: Theme;arrMenuOptions: MenuOptions;headerText: string;badgeColor: any;loginRoute: string;headerIcon: string;logoutIcon: any;srcLogo: string;heightLogo: string;widthLogo: string;lang: string;visibleNotif: boolean;badge: number = 1; { thisthemeSidebar = background: "#e53935" color: "white" ; thisthemeHeader = background: "white" color: "gray" ; thisarrMenuOptions = id: 0 title: "HOME" icon: null route: "home" // example component to navigate id: 1 title: "SETTINGS" icon: null route: "settings" // example component to navigate ; thisheaderText = "current_user"; thisbadgeColor = "white"; thisheaderIcon = "person"; thislogoutIcon = "reply"; thissrcLogo = "https://imgur.com/rNZ9Ncz.png"; thislang = "en"; thisvisibleNotif = true;} { thisbadge = 0;} { thisrouter;}
Models:
MenuOptions:
Theme:
Show/hide menu in components (e.g. LoginComponent):
// LoginComponent (hide on login);;; @ implements OnInit { menuService; } { } { thisrouter; // example component to navigate }