Angular Material Side Nav
Angular Material Side Nav: Sidenav is Angular Material component that is opened and closed and opened programatically. It is very easy to create side nav in Angular Material. Here in this tutorial we are going to explain how you can create Side Nav In Angular Material. You can also use our online editor to edit and run the code online.
Angular Material Side Nav | Side Menu Example
md-sidenav Directive and $mdSidenav service is used to create Side Nav, let us first create simple Side Nav to understand how it works.
Angular Material Side Nav | Left Side Menu Example
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MyController', function ($scope, $mdSidenav) {
$scope.openLeftNav = function() {
$mdSidenav('left').toggle();
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as ctrl" ng-cloak="" >
<md-content layout-padding>
<md-sidenav md-component-id="left" class="md-sidenav-left">
Left Nav
</md-sidenav>
<md-content>
<md-button ng-click="openLeftNav()">
Click to Open Left Menu
</md-button>
</md-content>
</div>
</body>
</html>
|
| Try It On → |
Note : $mdSidenav service must be imported in controller before using the side nav so make sure you have imported it properly.
If you run the above example it will produce output something like this –
Options Available
Following options are available for side nav which you can use as per your need-
md-is-open(expression):
Model to bind when nav bar is opened.
md-disable-backdrop(boolean):
You can use this to disable the backdrop. Backdrop will not be present if you set md-disable-backdrop to true.
md-component-id(string):
componentId which is used with $mdSidenav service.
md-is-locked-open(expression):
When this expression is evaluated to true, the nav ‘locks open’: it falls into the content’s flow instead of appearing over it. This overrides the md-is-open attribute.
md-disable-scroll-target(string):
This is used to disable the scrolling of the selector element. By default this is side nav’s parent.
Advertisements
