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
[php]
@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”]
}
]
}
}
[/php]
HTML using Angular2
[php]
[/php]
Updated html using Angular2
[php]
{{webTitle}}
- {{n.name}}
[/php]
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.
[php]
@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;
}
}
[/php]
CSS Part
[php]
ul li{cursor:pointer;}
.active{
color:blue;
}
.active ul{
display:block !important;
}
[/php]
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.
