How to reference right routerlink in mat-sidenav Angular 7?

Question

I'm new in Angular. I need to use the same router link in my mat-list-item as in the sub mat-sidenav-content.

For example: [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]

Is the correct link which I also need to be the same link inside sub mat-sidenav-content. Instead I have the following router link, which is not correct:

[routerLink]="['/list',{outlets: {sidebar: ['general', userId]}}].

I have no idea how to accomplish this and would appreciate any help solving this problem. Thank you.

<mat-sidenav-container class="sidenav-container">

<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
    <mat-toolbar>List of Employee</mat-toolbar>
    <mat-nav-list>
        <div *ngFor="let employee of employees">
            <mat-list-item>
                <a [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]">{{employee.firstName}}
            </a>
            </mat-list-item>
        </div>
    </mat-nav-list>
</mat-sidenav>

<mat-sidenav-content> 
    <mat-toolbar color="accent" class="navbar">
        <span><a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['general', userId]}}]">
                <mat-icon>assignment_ind</mat-icon>General
            </a></span>
        <span><a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['vehicleInformation', userId]}}]">
                <mat-icon>directions_car</mat-icon>Vehicle Information
            </a></span>
        <span> <a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['OLOUserRights']}}]">
                <mat-icon>vpn_key</mat-icon>OLO User Rights
            </a></span>
    </mat-toolbar>

    <router-outlet name="sidebar"></router-outlet>

</mat-sidenav-content>

score 0 · Answer 1 · answered Jan 30 '20 at 04:25

0

    **HTML**      
      <div *ngFor="let employee of employees">
                        <mat-list-item>
                            <a (click)="senddata()">{{employee.firstName}}
                        </a>
                        </mat-list-item>
                    </div>

        **Ts File**
        senddata(){
 this.router.navigate(['/list', {outlets: {sidebar: ['general', employee.userId]}}]);
        }

answered Jan 30 '20 at 04:25

Iliyas Shaik

108
5

Thank you! But how I can pass to "senddata()" current Id . Each time when I navigate to Name from Employee list I need to take this employee.id . How I can detect changes? – Lydia Jan 30 '20 at 14:35
(ngModelChange)="senddata(employee.firstName)" you can use this each time when you change this will trigger and send the particular id – Iliyas Shaik Feb 03 '20 at 06:39

score 0 · Answer 2 · answered Jan 30 '20 at 18:39

it's my solution:

 <div *ngFor="let employee of employees">
                    <mat-list-item>
                     <a routerLinkActive="active" (click)='saveUserID(employee.userId)' [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]">{{employee.firstName}}
            </a>list-item>
                </div>

to change in HTML in last 3 links userId to globalId

    **Ts File**
    saveUserID(id: number): void { 
this.globalId = id;

}

How to reference right routerlink in mat-sidenav Angular 7?

2 Answers2