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

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

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]);