Link

Link styles a native <a> as a navigation link while keeping every native and router semantic intact — href, routerLink, target, aria-current, and so on. Hover, active and focus rely on native pseudo-classes; the current-page and disabled looks react directly to the aria-current="page" and aria-disabled attributes, however they got set.

Minimal example

import { Component } from "@angular/core";
import { LinkComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [LinkComponent],
  template: `<a link href="/pricing">Pricing</a>`,
})
export class SampleComponent {}

How it works

Link never touches aria-current itself — its styling only reacts to the attribute being present, however it got there. That is what lets Angular Router own it entirely:

Recipes

Router integration

Let routerLinkActive + [ariaCurrentWhenActive]="'page'" drive the current-page look — this is the supported way, not comparing the current URL by hand.

import { Component } from "@angular/core";
import { RouterLink, RouterLinkActive } from "@angular/router";
import { LinkComponent } from "@sinequa/galactik";

@Component({
  selector: "app-nav",
  imports: [LinkComponent, RouterLink, RouterLinkActive],
  template: `
    <nav class="flex flex-wrap items-center gap-4">
      <a link [routerLink]="['/home']" routerLinkActive [ariaCurrentWhenActive]="'page'">Home</a>
      <a link [routerLink]="['/docs']" routerLinkActive [ariaCurrentWhenActive]="'page'">Docs</a>
    </nav>
  `,
})
export class NavComponent {}

External link

openWindow fully owns target/rel — the same way disabled owns aria-disabled/tabindex — and appends the external-link icon automatically. Don't set target/rel manually on a link that binds it, and don't use it if a custom rel is needed (use a manual link-icon-right in that case instead).

<a link [openWindow]="true" href="https://docs.sinequa.com">Read the docs</a>

Options

Pitfalls

What's next