The extras property of the navigation object contains additional information about the navigation, such as query parameters, fragment, and any custom data.

Use getCurrentNavigation()?.extras to access the extras property of the navigation object returned by getCurrentNavigation(). You need to call the getCurrentNavigation() method inside of the constructor. Use the info attribute inside a link element to pass extra data.

Example usage

app.component.html

<nav>
  <a [routerLink]="['/user', userId, userName]" [info]="{ data: { status: 1 } }"
    >Show user</a
  >
  ...
</nav>

user.component.ts

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';

export interface IInfo {
  data: { status: number };
}

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [],
  templateUrl: './user.component.html',
  styleUrl: './user.component.scss',
})
export class UserComponent {
  info: IInfo = { data: { status: -1 } };

  constructor(private router: Router) {
    const info = this.router.getCurrentNavigation()?.extras.info as IInfo;
    if (info) {
      this.info = info;
    }
  }

...
 
}

app.routes.ts

import { Routes } from '@angular/router';
import { UserComponent } from './components/user/user.component';

export const routes: Routes = [
  {
    path: 'user/:userId/:userName',
    component: UserComponent,
    pathMatch: 'full',
  },
];

user.component.html

<div>Info: {{ info.data.status }}</div>