angulartypescriptangular-materialangular7routerlinkactive

mat-nav-list always an item focused


I have a navigation menu. When I open it, the button/link Gebruikers(users) always behaves as an active-list-item, but it shouldn't.

navigation menu

Here is my HTML it is in a mat-nav-list, the *ngf is checking if the user should be seeing the link.

  <a mat-list-item [routerLink]="['/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityButton | async">
    <mat-icon mat-list-icon>event_available</mat-icon>
    <h4 mat-line>Beschikbaarheid</h4>
  </a>
  <a mat-list-item *ngIf="showAvailabilityMenu | async" [matMenuTriggerFor]="availabilityMenu">
      <mat-icon mat-list-icon>event_available</mat-icon>
      <h4 mat-line>Beschikbaarheid</h4>
    </a>
    <mat-menu #availabilityMenu="matMenu" xPosition="after" [overlapTrigger]="false">
      <a mat-menu-item [routerLink]="['/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuMine | async">Mijn beschikbaarheid</a>
      <a mat-menu-item [routerLink]="['/manage/timeblocks']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuTimeblocks | async">Tijdsblokken</a>
      <a mat-menu-item [routerLink]="['/manage/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuPerUser | async">Beschikbaarheid aanpassen</a>
      <a mat-menu-item [routerLink]="['/manage/availability/overview']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuOverview | async">Overzicht</a>
    </mat-menu>

  <!-- ABSENCE -->

  <a mat-list-item [routerLink]="['/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceButton | async">
    <mat-icon mat-list-icon>beach_access</mat-icon>
    <h4 mat-line>Afwezigheid</h4>
  </a>
  <a mat-list-item *ngIf="showAbsenceMenu | async" [matMenuTriggerFor]="absenceMenu">
    <mat-icon mat-list-icon>beach_access</mat-icon>
    <h4 mat-line>Afwezigheid</h4>
  </a>
  <mat-menu #absenceMenu="matMenu" xPosition="after" [overlapTrigger]="false">
    <a mat-menu-item [routerLink]="['/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceMenuMine | async">Mijn afwezigheid</a>
    <a mat-menu-item [routerLink]="['/manage/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceMenuOverview | async">Afwezigheid aanpassen</a>
  </mat-menu>

  <!-- PLANNING -->

  <a mat-list-item [routerLink]="['/planning/view']" (click)="linkFollow.emit()" *ngIf="showPlanningButton | async">
    <mat-icon mat-list-icon>grid_on</mat-icon>
    <h4 mat-line>Planning</h4>
  </a>
  <a mat-list-item *ngIf="showPlanningMenu | async" [matMenuTriggerFor]="planningMenu">
    <mat-icon mat-list-icon>grid_on</mat-icon>
    <h4 mat-line>Planning</h4>
  </a>
  <mat-menu #planningMenu="matMenu" xPosition="after" [overlapTrigger]="false">
    <a mat-menu-item [routerLink]="['/planning/view']" (click)="linkFollow.emit()" *ngIf="showPlanningMenuView | async">Planning bekijken</a>
    <a mat-menu-item [routerLink]="['/planning/edit']" (click)="linkFollow.emit()" *ngIf="showPlanningMenuEdit | async">Planning aanpassen</a>
  </mat-menu>


  <a mat-list-item [routerLink]="['/users']" (click)="linkFollow.emit()" *ngIf="showUsersButton | async">
    <mat-icon mat-list-icon>people</mat-icon>
    <h4 mat-line>Gebruikers</h4>
  </a>
  <a mat-list-item [routerLink]="['/hour-registration']" (click)="linkFollow.emit()" *ngIf="showHourRegistrationButton | async">
    <mat-icon mat-list-icon>schedule</mat-icon>
    <h4 mat-line>Uren Registratie</h4>
  </a>
  <a mat-list-item [routerLink]="['/employe-materials']" (click)="linkFollow.emit()" *ngIf="showEmployeeMaterials | async">
    <mat-icon mat-list-icon>pan_tool</mat-icon>
    <h4 mat-line>Werk benodigheden</h4>
  </a>
  <a mat-list-item [routerLink]="['/messages']" (click)="linkFollow.emit()" *ngIf="showMessageButton | async">
    <mat-icon mat-list-icon>message</mat-icon>
    <h4 mat-line>Berichten</h4>
  </a>

I have tried using routerLinkActive="active-list-item", but with the same result + other links dont get the active-list-item class.

So how can I change that the link Gebruikers isnt selected by default, or how can I make routerLinkActive work?


Solution

  • So I cheated a little and fixed my problem with using a dummy link right under "mat-nav-list"

      <div class="hidden">
            <a mat-list-item [routerLink]="['/profile']">
                <h4 mat-line></h4>
            </a>
        </div>
    

    And some css to hide it. I do not use display:none or visabilty: false (not sure if this is the correct one) because that way the dummy does not get renderend and the link Gebruikers(users) still is set to active-list-item.

    .hidden{
      height: 1px;
      opacity: 0;
    }