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 live24u.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!.

Also Read :   vue js getelementbyid Method DOM in VUE




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.

Also Read :   Change Page Title Dynamically Using Angular JS


@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(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.