@absoluteui/angular/router

Connect navigation components (sidebar, breadcrumb, tabs, stepper, menus) to the Angular router.

import { AuiRouterNav } from '@absoluteui/angular/router';

aui-sidebar[auiRouterNav], aui-breadcrumb[auiRouterNav], aui-stepper[auiRouterNav], aui-tabs[auiRouterNav], aui-menu-bar[auiRouterNav], button[auiMenu][auiRouterNav]

Class AuiRouterNav; template reference #ref="auiRouterNav".

Router navigation for an AbsoluteUI navigation component: <aui-sidebar auiRouterNav [items]="items"> with items such as { id: 'people', label: 'People', routerLink: '/people' }.

Server rendering: Renders in the browser only; on the server the element stays empty.

Functions, constants, and types

Interfaces

AuiRouterTarget

Router fields an item, step, or tab may carry (in addition to its own fields).

interface AuiRouterTarget {
  routerLink: string | readonly unknown[];
  queryParams?: Params | null;
  fragment?: string;
  queryParamsHandling?: QueryParamsHandling | null;
  preserveFragment?: boolean;
  state?: Record<string, unknown>;
  replaceUrl?: boolean;
  skipLocationChange?: boolean;
  activeOptions?: Partial<IsActiveMatchOptions>;
}

Types

AuiRouterItem

An item type with optional router fields, nested items included, e.g. AuiRouterItem<SidebarItem>, AuiRouterItem<MenuItem>, AuiRouterItem<StepperStep>.

type AuiRouterItem<T> = T extends unknown ? 'items' extends keyof T ? Omit<T, 'items'> & Partial<AuiRouterTarget> & RouterChildren<T> : T & Partial<AuiRouterTarget> : never;