Angular 6 pass data to component on router menu click

Question

I have a navmenu component as under:

     <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-wrench'></span> Configuration<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">Options</li>
            <li [routerLinkActive]="['link-active']">
                <a [routerLink]="['config']" [queryParams]="{optionFilter: 'LOB' }">
                    <span class='glyphicon glyphicon-arrow-right'></span> Line of Business
                </a>
            </li>
            <li [routerLinkActive]="['link-active']">
                <a [routerLink]="['config']" [queryParams]="{optionFilter: 'RG' }">
                    <span class='glyphicon glyphicon-arrow-right'></span> Report Groups
                </a>
            </li>
        </ul>
    </li>

There are dropdown menus under Configuration. All menus lead to the same component 'config'. However, based on the routerLink selected I need to write logic. How can I pass the param 'Line of Business', or 'Report Group' to the config component and retrieve in ngOnInit?

Take a look over here in the docs: https://angular.io/guide/router#configuration — julianobrasil, May 28 '19 at 18:12

score 1 · Answer 1 · answered May 28 '19 at 18:19

You can pass that in query parameters:

<a [routerLink]="['config'] [queryParams]="{ someProperty: 'ReportGroup' }">

Inject ActivatedRoute in the component's constructor, and subscribe queryParams or queryParamsMap.

Or

You can make it two separate routes, pointing to the same component. Again, inject ActivatedRoute, but subscribe route params instead of query params.

score 0 · Answer 2 · answered May 30 '19 at 00:37

Passed queryparams as suggested by mbojko, and retrieved in the component as under:

//import router in component
import { ActivatedRoute} from '@angular/router';

//constructor:
    constructor(
        private _route: ActivatedRoute) { }
 ngOnInit() {
        this._route
            .queryParams
            .subscribe(params => {
                this.FilterOption = params['optionFilter'];
                console.log('menu click', params['optionFilter']);
            });
}

Angular 6 pass data to component on router menu click

2 Answers2