Clash Royale CLAN TAG#URR8PPP

Add active class to submenu on click in angular 4

I have created a nested menu in Angular 4. I am facing problem with active class. Here is my code.

My code

I am able to add active class to main link but what should I do to add active class to submenu based on click. Please help

1 Answer
1

You can make an object to store what is selected for main link and sub link and then apply the class accordingly.

main

sub

For example, you may pass main as an argument to tell that it is a main link and check isActive accordingly for main itself.

main

isActive

main

(click)="select('main', n.name);" [ngClass]="active: isActive('main', n.name)"


Similarly, it can be done for the sub link.

sub

Your functions could be as follows:-

select(type, item, $event)
this.selected[type] = (this.selected[type] === item ? null : item);
$event ? $event.stopPropagation() : null;

isActive(type, item)
return this.selected[type] === item;



You may stop propagation when selecting the sub link which is optional, I suppose (Kindly test for your use case).

Please check the code below:-

https://stackblitz.com/edit/angular-7b7cwd?file=src/app/app.component.html

Sub Menu 1

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.