ui-sref / ui-sref-active in modern Angular

<nav>
  <a ui-sref="users" ui-sref-active="active">Users</a>
  <a ui-sref="userDetail({ id: user.id })">{{ user.name }}</a>
  <a ui-sref="reports({ year: 2024 })" ui-sref-active-eq="active">Reports</a>
</nav>

@Component({
  selector: 'app-nav',
  imports: [RouterLink, RouterLinkActive],
  template: `
    <a routerLink="/users" routerLinkActive="active">Users</a>
    <a [routerLink]="['/users', user().id]">{{ user().name }}</a>
    <a routerLink="/reports" [queryParams]="{ year: 2024 }"
       routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Reports</a>
  `,
})
export class NavComponent {
  user = input.required<User>();
}