Angular 2 collapse and expandable Menu – Angular 2 Nested Menu

Rate this post

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

READ :  Vue js Event Handling custom components and methods

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]

{{webTitle}}

  • {{n.name}}
    • {{child}}

[/php]

Updated html using Angular2

[php]

{{webTitle}}

  • {{n.name}}
    • {{child}}

[/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]

READ :  AngularJS SEO - Single Page App Crawling and Indexing

CSS Part

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

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.

Leave a Reply

Your email address will not be published.