Angular nav-link stops working after routerLinkActive activates - html

Question

<ul class="nav nav-pills flex-column nav-justified">
<div id="sidebar-item" *ngFor="let item of sidebarItems">
<li class="nav-item" routerLink="{{item.url}}">
<a class="nav-link" routerLink="{{item.url}}" [routerLinkActive]="['active']"><fa-icon [icon]="item.icon" class="fa_icon ml-n3 m-2"></fa-icon>
<span class="item_title">{{ item.title | uppercase }}</span>
</a>
</li>
<hr>
</div>
</ul>
I have 4 items in sidebarItems list and it generates 4 nav-links. When the first one is active the other three don't work and when one of the other three is active the first one doesn't work.
First active, second doesn't work
Third active, second works
Third active, first doesn't work

Answer 1

You need to remove the div inside the ul tag and move you *ngForm on the li
<ul class="nav nav-pills flex-column nav-justified">
<li class="nav-item" *ngFor="let item of sidebarItems">
<a class="nav-link" routerLink="{{item.url}}" routerLinkActive="active">
<span class="item_title">{{ item.title | uppercase }}</span>
</a>
</li>
</ul>
Forked and working stackblitz at https://stackblitz.com/edit/angular-9oexwb
Edit: Your solution works on a wide enough monitor because your styles are wrt the window width. You need to work a lot on your styles but a quick fix would be to change the padding to margin for #dashboard[_ngcontent-xsb-c0] as 200px. Stackblitz updated.