routerLink is not showing in the html - Angular 8

Question

Goal: create a dynamic list with two arrays.

Email is a statically created option

Array Routes:

[[{pri_access:"Administracion/Usuarios",pri_name:"Usuarios"},{pri_access:"Administracion/Privilegios",pri_name:"Privilegios"},{pri_access:"Administracion/Rol",pri_name:"Rol"}],[{pri_access:"Reporte/Ventas",pri_name:"Ganancias"}]]

Array Group:

["ADMINISTRACION","REPORTE"]

The group and route array are the same size. I create the list dynamically as follows

 import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {PrivilegesService} from '../../SisVentas/service/Privileges/privileges.service';

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.sass']
})
export class SidebarComponent implements OnInit {
    userName: string = btoa(localStorage.getItem('USER_NAME'));
    rolName: string = btoa(localStorage.getItem('NAME_ROL'));
    tokenUser: string = localStorage.getItem('TOKEN_USER');
    privileges: any[] = [];
    tempPrivileges: any[] = [];
    tempKeys: any[] = [];
    
    privilegesGroup: any[] = [];
    privilegesRoute: any[] = [];

    constructor(
        private httpClient: HttpClient,
        private privilege: PrivilegesService,
    ) { }

    ngOnInit() {
        if (this.tokenUser) {
            this.getPrivilegesByRol();
        }
    }

    getPrivilegesByRol() {
        const idRol = localStorage.getItem('ROL');

        this.privilege.getPrivilegesByRol(idRol).subscribe(
            resp => {
                this.tempPrivileges.push(resp);

                for (let i = 0; i < this.tempPrivileges.length; i++) {
                    for (let j = i; j < this.tempPrivileges[i].length; j++) {
                        if (!this.privileges.hasOwnProperty(this.tempPrivileges[i][j].pri_group)) {
                            this.privileges[this.tempPrivileges[i][j].pri_group] = [];
                        }
                        this.privileges[this.tempPrivileges[i][j].pri_group].push({
                            pri_access: this.tempPrivileges[i][j].pri_acces,
                            pri_name: this.tempPrivileges[i][j].pri_nombre,
                        });
                    }
                }

                for (let key in this.privileges) {
                    this.privilegesGroup.push(key);
                    this.privilegesRoute.push(this.privileges[key]);
                }

                console.log(JSON.stringify(this.privilegesRoute));
                console.log(JSON.stringify(this.privilegesGroup));
            },
            error => {
                console.error(error);
            }
        );
    }
}

HTML

<div>
    <!-- Left Sidebar -->
    <aside id="leftsidebar" class="sidebar">
        <!-- Menu -->
        <div class="menu">
            <ul class="list">
                <li class="sidebar-user-panel">
                    <div class="user-panel">
                        <div class=" image">
                            <img src="assets/images/usrbig.jpg" class="img-circle user-img-circle" alt="User Image" />
                        </div>
                    </div>
                    <div class="profile-usertitle">
                        <div class="sidebar-userpic-name"> {{this.userName}} </div>
                        <div class="profile-usertitle-job "> {{this.rolName}} </div>
                    </div>
                </li>

                <li routerLinkActive="active" *ngFor="let group of privilegesGroup; let a = index" >
                    <a href="#" onClick="return false;" class="menu-toggle">
                        <i class="fas fa-tag"></i>
                        <span>{{group}}</span>
                    </a>
                    <ul class="ml-menu">
                        <li routerLinkActive="active" *ngFor="let route of privilegesRoute[a]">
                            <a routerLink="{{route.pri_access}}">{{route.pri_name}}</a>
                        </li>
                    </ul>
                </li>

                <li routerLinkActive="active">
                    <a href="#" onClick="return false;" class="menu-toggle">
                        <i class="fas fa-mail-bulk"></i>
                        <span>Email</span>
                    </a>
                    <ul class="ml-menu">
                        <li routerLinkActive="active">
                            <a routerLink="email/inbox">Inbox</a>
                        </li>
                        <li routerLinkActive="active">
                            <a routerLink="email/compose">Compose</a>
                        </li>
                        <li routerLinkActive="active">
                            <a routerLink="email/read-mail">Read Email</a>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
        <!-- #Menu -->
    </aside>
    <!-- #END# Left Sidebar -->
</div>

PROBLEM: When I inspect the html, I find that routerLink is not generated for the dynamically created list items, but for the email option that was created statically. What could be wrong?

Answer 1

Try Using:

If u r using variabe for router link [routerLink]="link" or [routerLink]="['/page1']" it's not binding the routerLink attribute to the element but if using direct string assigning to the routerLink like routerLink="page1" it binding the routerLink attribute to the element.In the both ways routing will work fine.

//app.component.ts
public routerLinks = ["page1", "page2"];

//app.component.html
<div *ngFor="let link of routerLinks">
  <a [routerLink]="link">{{link}}</a>
</div>

Here's the stackblitz example: https://stackblitz.com/edit/angular-ivy-onf2ct?file=src/app/app.component.html

Answer 2

You should remove this from html

so, try:

 <li *ngFor="let group of privilegesGroup; let i = index">  
      .
      .
      .
      <ul>
        <li *ngFor="let route of privilegesRoute[i]">
           <a .... >
        </li>  
      </ul>

   </li>