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