typescript 46 lines · 6 steps

Building an active-route navbar in Angular

A standalone Angular navbar that highlights the current route and exposes it to assistive tech.

Explained by highlit

Angular Intermediate routing standalone-components accessibility template-directives data-binding

1import { Component } from '@angular/core';
2import { RouterLink, RouterLinkActive } from '@angular/router';
3import { NgFor } from '@angular/common';
4 
5@Component({
selector: 'app-navbar',
standalone: true,
imports: [RouterLink, RouterLinkActive, NgFor],
template: `
  <nav class="navbar">
    <a
      routerLink="/"
      routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }"
    >
      Home
    </a>
18 
    <a
      *ngFor="let link of links"
      [routerLink]="link.path"
      routerLinkActive="active"
      #rla="routerLinkActive"
      [attr.aria-current]="rla.isActive ? 'page' : null"
    >
      {{ link.label }}
    </a>
  </nav>
`,
styles: [`
  .navbar { display: flex; gap: 1rem; }
  .navbar a { color: #556; text-decoration: none; padding: 0.5rem 0.75rem; }
  .navbar a.active {
    color: #1a73e8;
    font-weight: 600;
    border-bottom: 2px solid #1a73e8;
  }
`],
39})
40export class NavbarComponent {
readonly links = [
  { path: '/dashboard', label: 'Dashboard' },
  { path: '/projects', label: 'Projects' },
  { path: '/settings', label: 'Settings' },
];
46}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1routerLinkActive toggles a CSS class automatically based on the current URL, so highlighting needs no manual state.
2Exporting a directive to a template reference variable lets you read its live state elsewhere in the template.
3Deriving aria-current from active state keeps the UI accessible without duplicating routing logic.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';