CODEWITHSUNDEEP
angularmenurouterlinkactive
olivier
olivier

Reputation: 159

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

Upvotes: 0

Views: 477

Answers (1)

Chiranjaya Denuwan
Chiranjaya Denuwan

Reputation: 683

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

Upvotes: 0

Related Questions