Integração Angular: Documentação do Hook usePathname

O hook usePathname retorna o caminho (pathname) atual do navegador com o segmento de localidade removido, na forma de um Signal<string> do Angular. Ele é útil para criar navegação sensível à localidade — por exemplo, para determinar qual item de navegação está ativo — sem precisar remover o prefixo da localidade manualmente.

Importando usePathname no Angular

import { usePathname } from "angular-intlayer";

Visão Geral

O usePathname lê o window.location.pathname, remove o prefixo de localidade via getPathWithoutLocale e atualiza o sinal sempre que o navegador aciona um evento popstate (navegação para trás/frente). Ele utiliza o DestroyRef do Angular para limpar automaticamente o ouvinte de eventos quando o componente é destruído.

Uso

import { Component, input } from "@angular/core";
import { usePathname } from "angular-intlayer";

@Component({
  standalone: true,
  selector: "app-nav-item",
  template: `
    <a
      [href]="href()"
      [attr.aria-current]="pathname() === href() ? 'page' : null"
    >
      {{ label() }}
    </a>
  `,
})
export class NavItemComponent {
  readonly href = input.required<string>();
  readonly label = input.required<string>();

  readonly pathname = usePathname();
}

Valor de Retorno

Comportamento

• Remoção da localidade: Remove o segmento inicial de localidade (ex. /pt/dashboard → /dashboard).
• Reativo: Atualiza automaticamente em eventos popstate (navegação de voltar/avançar no navegador).
• Seguro em SSR: Retorna "" quando window não está disponível.
• Limpeza: O ouvinte de popstate é removido via DestroyRef.onDestroy quando o componente pai é destruído.

Exemplo

import { Component } from "@angular/core";
import { usePathname } from "angular-intlayer";

@Component({
  standalone: true,
  selector: "app-sidebar",
  template: `
    <nav>
      @for (link of links; track link.href) {
        <a
          [href]="link.href"
          [style.font-weight]="pathname() === link.href ? 'bold' : 'normal'"
        >
          {{ link.label }}
        </a>
      }
    </nav>
  `,
})
export class SidebarComponent {
  readonly links = [
    { href: "/dashboard", label: "Dashboard" },
    { href: "/settings", label: "Configurações" },
  ];

  readonly pathname = usePathname();
}

Relacionados

• useLocale — localidade atual + alternador de localidade
• getPathWithoutLocale — o utilitário principal usado por este hook