How to implement nested list view in angular material design - angular-material

Question

Is there a way to create a nested list view component such as the below one which is implemented in jquery mobile ?
https://demos.jquerymobile.com/1.2.0/docs/lists/lists-ul.html

Answer 1

I used up angular material tab component styles to create UI of a nested list. You can find the demo here.
http://codepen.io/ramanathanMuthuraman/pen/rLpBxQ
HTML
<div ng-app="appName">
<div ng-controller="MainController as vm">
<md-toolbar class="site-content-toolbar">
<h2 class="md-toolbar-item md-breadcrumb md-headline">
<span class="md-padding">{{vm.title}}</span>
</h2>
</md-toolbar>
<md-divider></md-divider>
<md-content class="md-tabs">
<div ng-class="vm.isDrilldownView?'md-left':'md-active'" class="md-tab-content dynamic-height">
<div ng-class="{'md-left':vm.isDrilldownView}" ng-if="!vm.isDrilldownView">
<md-list>
<md-list-item ng-click="vm.nextView(employee)" ng-repeat="employee in vm.employeeList
" class="md-3-line">
<div class="md-list-item-text " layout="column">
<h3>{{ employee.employeeID }}</h3>
<h4>{{ employee.name }}</h4>
<p>{{ employee.overallScore }}</p>
</div>
<md-button class="md-primary md-raised">></md-button>
<md-divider></md-divider>
</md-list-item>
</md-list>
</div>
</div>
<div ng-class="vm.isDrilldownView?'md-active':'md-right'" class="md-tab-content dynamic-height">
<div class="drilldownView" ng-if="vm.isDrilldownView">
<md-whiteframe class="md-whiteframe-1dp md-padding" layout="column" layout-align="center">
<h5 flex>ID: {{ vm.employee.employeeID}}</h5>
<h5 flex>Name: {{ vm.employee.name }}</h5>
<h5 flex>Overall Score :{{ vm.employee.overallScore }}</h5>
</md-whiteframe>
<div layout="row" layout-align="center" flex>
<md-button ng-click="vm.prevView()" class="md-primary md-raised">< BACK</md-button>
</div>
</md-content>
</div>
JS
(function() {
angular
.module("appName", ['ngMaterial'])
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm.title = "View Summary";
vm.isDrilldownView = false;
vm.employeeList = [{
"employeeID": "1",
"name": "Thomas",
"overallScore": 80
}, {
"employeeID": 2,
"name": "Maya",
"overallScore": 80
}];
vm.nextView = function(employee) {
vm.isDrilldownView = true;
employee.individualScore = [{
"name": "Goal Score",
"value": "100"
}, {
"name": "Performance",
"value": "100"
}, {
"name": "Attendance",
"value": "100"
}, {
"name": "Skill set",
"value": "100"
}];
vm.employee = employee;
};
vm.prevView = function() {
vm.isDrilldownView = false;
};
};
})();
CSS
.md-tabs {
overflow: visible;
}
.md-tab-content {
width: 100%;
height: 100%;
overflow: auto;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s;
}
.md-tab-content.md-left:not(.md-active) {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
animation: 1s md-tab-content-hide;
opacity: 0;
}
.md-tab-content.md-right:not(.md-active) {
-webkit-transform: translateX(100%);
transform: translateX(100%);
animation: 1s md-tab-content-hide;
opacity: 0;
}