Angular 2 collapse and expandable Menu – Angular 2 Nested Menu

Angular 2 collapse and expandable Menu – Angular 2 Nested Menu

In this Post We Will Explain About is Angular 2 collapse and expandable Menu – Angular 2 Nested Menu With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Native slide toggle – collapse animation Menu using Angular 2 and Animate

In this post we will show you Best way to implement Angular 2 how create dynamic a collapse menu, hear for How to Angular2 Menus, Navigation, and Dialogs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Collapsible menu using Angular 2 with Nested menu using Angular 2 Example

Component

@Component({
  selector: 'live-App',
  template: `./app.component.html`,
  styleUrls : ['style.css']
})
export class App {
  webTitle:String;
  menuList:any;
  constructor() {
    this.webTitle = "Collapsible menu - Angular 2";
 this.menuList = [
  {
   "name": "Angular",
   "secondMeu": ["Anguler 1", "Angular 2"]
 },
 {
  "name": "serverSide",
  "secondMeu": ["PHP", "Magento"]
 },
 {
  "name": "Laravel",
  "secondMeu": ["Laravel 2", "Laravel 3"]
 }
 ]
  }
}

HTML using Angular2

<div>
<h4>{{webTitle}}</h4>
<ul>
 <li *ngFor="getlist n of menuList"><span>{{n.name}}</span>
  <ul>
   <li *ngFor="getlist child of n.secondMeu">{{child}}</li>
  </ul>
 </li> 
</ul>
</div>

Updated html using Angular2

<div>
<h4>{{webTitle}}</h4>
<ul>
 <li *ngFor="getlist n of menuList" (click)="select(n.name);" 
[ngClass]="{active: isActive(n.name)}"><span>{{n.name}}</span>
  <ul style="display:none;">
   <li *ngFor="getlist child of n.secondMeu">{{child}}</li>
  </ul>
 </li> 
</ul>
</div>

Updated component using Angular2

Here some I have used simple angular 2 click new method and with angular ngFor used to loop the angular array.

@Component({
  selector: 'live-App',
  template: `./app.component.html`,
  styleUrls : ['style.css']
})
export class App {
  webTitle:String;
  menuList:any;
  selected:any;
  constructor() {
    this.webTitle = "Collapsible menu - Angular 2";
 this.menuList = [
  {
   "name": "Angular",
   "secondMeu": ["Anguler 1", "Angular 2"]
 },
 {
  "name": "serverSide",
  "secondMeu": ["PHP", "Magento"]
 },
 {
  "name": "Laravel",
  "secondMeu": ["Laravel 2", "Laravel 3"]
 }
 ]
  }
  select(smenu){
     this.selected = (this.selected === smenu ? null : smenu);
  }
  isActive(smenu){
    return this.selected === smenu;
  }
}

CSS Part

ul li{cursor:pointer;}
.active{
  color:blue;
}
.active ul{
  display:block !important;
}

Example

I hope you have Got Native slide toggle – collapse animation Menu using Angular 2 and Animate And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.