item menu: define a routerlink active by default when launching the application

Question

It’s all in the title, I’d like the first item of my menu to take the 'primary' style of angular material. Here is my code that works only when I clicked on a menu item

    <div class="menu">
        <div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index">
            <a routerLink="{{ itemFooterMenu.utilRoute }}" routerLinkActive #rla="routerLinkActive" >
                
                <button class="mat-raised-button" mat-raised-button [color]="rla.isActive ? 'primary' : ''">
                    <div>
                        <mat-icon [color]="rla.isActive ? '' : 'primary'">{{ itemFooterMenu.matIcon }}</mat-icon>
                    </div>
                </button>
            </a>
        </div>
</div>

How can I do that ? Thank you

score 0 · Accepted Answer · answered Jul 26 '21 at 19:30

HTML

<div class="menu">
  <div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index;" >
    <a routerLink="{{ itemFooterMenu.utilRoute }}" routerLinkActive="active" #rla="routerLinkActive">
      <button class="mat-raised-button" mat-raised-button [color]="rla.isActive ? 'primary' : ''">
        <div>
          <mat-icon [color]="rla.isActive ? '' : 'primary'">{{ itemFooterMenu.matIcon }}</mat-icon>
        </div>
      </button>
    </a>
  </div>
</div>

TS

constructor(private router: Router) {
}

After loading values to itemsFooterMenu,navigate to the first routerlink in the array

this.router.navigate([this.itemsFooterMenu[0].utilRoute]);

item menu: define a routerlink active by default when launching the application

1 Answers1