Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a responsive nav-bar using Angular material 2?

I'm trying to create a navigation bar using Angular material 2 that collapses in small screens like mobile devices and tablets.

I was only able to find md-button but not md-menu-bar as was in Angular material.

like image 331
kero Avatar asked Jul 05 '16 17:07

kero


People also ask

Is material angular responsive?

It is an In-built responsive design.

Does angular material have a NavBar?

Angular material also provides us navbar, which is nothing but collapsible side content. This type of site content can be used to show the menu of an application or different types of features available to the application.

How do I make my toolbar responsive?

To make the toolbar responsive, set the overflow input to true .


2 Answers

Here is what I used to build my responsive nav-bar using Angular2+ Material 2 and flex-layout in angular-cli app.

(Please visit Install Angular Material and Angular CDK)

1) Install flex-layout

npm install @angular/flex-layout -save 

2) Include flex-layout in your app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout"; 

3) Import

imports: [  BrowserModule,  FormsModule,  HttpModule,  RoutingModule,  FlexLayoutModule, MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules). ], 

app.component.html

<mat-toolbar color="primary">        <button mat-button routerLink="/">      <mat-icon>home</mat-icon>           {{title}}</button>        <!-- This fills the remaining space of the current row -->      <span class="fill-remaining-space"></span>      <div fxLayout="row" fxShow="false" fxShow.gt-sm>          <button mat-button routerLink="/products">Products</button>          <button mat-button routerLink="/dashboard">Dashboard</button>      </div>      <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>       <mat-icon>menu</mat-icon>      </button>    </mat-toolbar>  <mat-menu x-position="before" #menu="matMenu">      <button mat-menu-item routerLink="/products">Products</button>      <button mat-menu-item routerLink="/dashboard">Dashboard</button>      <!--<button mat-menu-item>Help</button>-->  </mat-menu>

app.component.css

.fill-remaining-space {     /*This fills the remaining space, by using flexbox.      Every toolbar row uses a flexbox row layout. */    flex: 1 1 auto;  }

Note: to test, resize your page.

take a look at flex-layout docs

like image 72
user2662006 Avatar answered Sep 18 '22 23:09

user2662006


Here is my favorite way of creating a responsive Navigation Bar in Angular. If you use Angular 6, make sure you use a version 6.1+
Working example on Stackblitz: https://stackblitz.com/edit/angular-v6xwte

Example on a smaller screen: Toolbar on a small screen

Example on a larger screen: Toolbar on a large screen

Here are precise steps how to do it:

1) Install necessary packages. Type in your terminal:

npm install --save @angular/material @angular/cdk @angular/animations  npm install @angular/flex-layout --save 

2) Import necessary modules in your app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FlexLayoutModule } from '@angular/flex-layout'; import {   MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; 

Remember to add these modules to the imports array below.

3) Add Material Icons link to your index.html
The link must go before any Angular content.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

4) In your styles.css add an Angular theme and set margins to 0%

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; body{     margin: 0%; } 

5) Add toolbar HTML code in your app.component.html

<div style="height: 100vh;">  <mat-toolbar color="primary">     <div fxShow="true" fxHide.gt-sm="true">       <button mat-icon-button (click)="sidenav.toggle()">         <mat-icon>menu</mat-icon>       </button>     </div>     <a mat-button class="companyName" routerLink="/">       <span>Site name</span>     </a>     <span class="example-spacer"></span>     <div fxShow="true" fxHide.lt-md="true">       <a mat-button routerLink="/about-us">About us</a>       <a mat-button routerLink="/prices">Prices</a>       <a mat-button routerLink="/start-page">Start page</a>       <a mat-button routerLink="/offer">Offer</a>       <a mat-button routerLink="/contact">Contact</a>     </div>   </mat-toolbar>   <mat-sidenav-container fxFlexFill class="example-container">     <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">       <div fxLayout="column">         <a mat-button routerLink="/about-us">About us</a>         <a mat-button routerLink="/prices">Prices</a>         <a mat-button routerLink="/start-page">Start page</a>         <a mat-button routerLink="/offer">Offer</a>         <a mat-button routerLink="/contact">Contact</a>       </div>     </mat-sidenav>     <mat-sidenav-content fxFlexFill>       Awesome content     </mat-sidenav-content>   </mat-sidenav-container> </div> 

6) Style the toolbar in your app.component.css

.companyName{     font-size: 150%; } div {     overflow: inherit; } a{     text-decoration: none;     font-size: 110%;     white-space: normal; } button{     font-size: 110%;     min-width: min-content; } .example-icon {     padding: 0 14px;   }    .example-spacer {     flex: 1 1 auto;   }   .mat-sidenav-content{       font-size: 200%;       text-align: center;   } 
like image 35
Tomasz Chudzik Avatar answered Sep 21 '22 23:09

Tomasz Chudzik