Angular routerLinkActive menu handle / 앵귤러 라우터 메뉴 핸들 예시

<div
  [routerLink]="menu.path"
  (click)="handleMenu()"
  class="flex items-center justify-between w-56 px-4 py-2 text-gray-400 transition-all duration-300 rounded-md cursor-pointer hover:text-blue-400 hover:bg-blue-50 hover:scale-105"
  routerLinkActive="text-gray-700"
>
  <div class="flex items-center gap-4">
    <app-icon class="w-5 h-5" [name]="menu.data?.['icon']" />
    <p class="text-sm"><ng-content></ng-content></p>
  </div>

  <app-icon
    *ngIf="menu.data?.['children']"
    class="w-5 h-5 transition-all duration-300"
    [ngClass]="{ 'rotate-180': !isOpen }"
    [name]="menu.data?.['icon']"
  />
</div>

<div *ngIf="menu.data?.['children'] && isOpen">
  <div
    *ngFor="let i of menu.data?.['children']"
    class="flex items-center gap-4 px-4 py-2 text-gray-400 transition-all duration-300 rounded-md cursor-pointer hover:text-blue-400 hover:bg-blue-50 hover:scale-105"
    (click)="handleMenu()"
  >
    <app-icon class="w-5 h-5" name="mdi:circle-small" />
    <p class="text-sm">{{ i.title }}</p>
  </div>
</div>

1. 상단 routerLinkActive :현재 라우트 링크와 일치할 경우 명시한 내용을 class name 으로 설정

2. 일반적으로

 router.url === menu.path

라는 조건을 활용해서 현재 메뉴와 라우터 url을 비교하기 마련인데, 이 방식을 쓰면 코드도 줄고 더욱 직관적이라 좋습니다.