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

READ :  Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

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]

READ :  Laravel 6 get current login user details using Auth

{{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]

CSS Part

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

READ :  Most Useful Tips and Tricks for Notepad++ Keyboard Shortcuts

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. Required fields are marked *