Objective: the aim is to dynamically generate a list using two arrays.

https://i.sstatic.net/mixRV.png

Email option is manually created https://i.sstatic.net/mi23u.png

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"}]]

https://i.sstatic.net/3o55g.png

Array Group:

["ADMINISTRACION","REPORTE"]

https://i.sstatic.net/bw29u.png

The group and route array are of equal size. The dynamic list creation process is as follows https://i.sstatic.net/QjqhV.png

 import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@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">
        <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>
    </aside>
</div>

ISSUE: Upon inspection of the HTML code, it appears that routerLink is not being generated for the dynamically created list items, unlike the statically created email option. What could be causing this discrepancy?

https://i.sstatic.net/Hjsrb.png