Angular Material - Angular Material Subheaders - Angular Material Tutorial
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular
What is Subheader in Angular
- The md-subheader, an Angular directives is used to show a subheader for a section.
- The md-subheader directive creates a sticky subheader for a section.
- Developers are able to disable the stickiness of the subheader by using the following markup
learn angular material tutorials - subheader display Example
<md-subheader class="md-no-sticky">Not Sticky</md-subheader>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
Notes:
- The md-subheader directive uses the $mdSticky service to make the subheader sticky.
- Whenever the current browser doesn't support stickiness natively, the subheader will be compiled twice to create a sticky clone of the subheader.
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular
Usage:
<md-subheader>Online Friends</md-subheader>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
Example:
- The following example showcases the use of md-subheader showcase uses of subheader component.
<html lang="en" >
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('subheaderController', subheaderController);
function subheaderController ($scope) {
$scope.fruitNames = ['Apple', 'Banana', 'Orange'];
$scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
$scope.eateries = ['Milk', 'Bread'];
}
</script>
</head>
<body ng-app="firstApplication">
<div id="subheaderContainer" ng-controller="subheaderController as ctrl" layout="column" flex layout-fill ng-cloak>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">Items</div>
</md-toolbar>
<md-content style="height: 600px;">
<section>
<md-subheader class="md-primary">Fruits</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat="fruits in fruitNames">
<div>
<p>{{fruits}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader class="md-warn">Vegetables</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat="veg in vegNames">
<div>
<p>{{veg}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader>Eateries</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat="eatery in eateries">
<div>
<p>{{eatery}}</p>
</div>
</md-list-item>
</md-list>
</section>
</md-content>
</div>
</body>
</html>