Skip to main content
The Navbar component is a shared component that provides navigation across the application using Angular’s Router with visual feedback for the active route.

​
Component Files

The component is located at src/app/components/shared/navbar/:
  • navbar.ts - Component logic
  • navbar.html - Template with inline styles

​
TypeScript Implementation

navbar.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from "@angular/router";

@Component({
  selector: 'app-navbar',
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './navbar.html',
})
export class Navbar {

}

​
Component Configuration

Selector: app-navbar
  • Used in templates as <app-navbar></app-navbar>
Imports: [RouterLink, RouterLinkActive]
  • RouterLink - Directive for navigation
  • RouterLinkActive - Directive for styling active routes
This is a standalone component, meaning it directly imports the directives it needs without requiring an NgModule.

​
HTML Template

navbar.html
<style>
    nav{
        display: flex;
        justify-content: space-around;
        background-color: #212121;
        color: white;
        padding: 10px;

    }

    nav a{
        color: white;
        text-decoration: none;
    }
    nav a.active{
        color: red;
        text-decoration: underline;
    }
</style>

<nav>
    <a routerLink="/" routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}">Contador</a>
    <a [routerLink]="['/hero']" [routerLinkActive]="'active'">Hero</a>
    <a [routerLink]="['/dragonball']" [routerLinkActive]="'active'">Dragonball</a>
    <a [routerLink]="['/dragonball-super']" [routerLinkActive]="'active'">Dragonball Super</a>
</nav>

​
Styling

nav{
    display: flex;
    justify-content: space-around;
    background-color: #212121;
    color: white;
    padding: 10px;
}
Layout:
  • display: flex - Flexbox layout
  • justify-content: space-around - Distributes links evenly with space around them
  • Dark theme with #212121 background
nav a{
    color: white;
    text-decoration: none;
}
nav a.active{
    color: red;
    text-decoration: underline;
}
Default links: White text, no underline
Active link: Red text with underline
The styles are defined inline in the template file using a <style> tag. These styles are still scoped to the component.

​
Router Directives

Navigates to different routes when clicked: 
<!-- String syntax -->
<a routerLink="/">Contador</a>

<!-- Array syntax -->
<a [routerLink]="['/hero']">Hero</a>
Two syntaxes:
  • Attribute binding: routerLink="/path" - For simple static paths
  • Property binding: [routerLink]="['/path']" - For dynamic paths or paths with parameters
Both are functionally equivalent for simple routes.

​
RouterLinkActive

Automatically applies a CSS class when the route is active: 
<a routerLink="/" routerLinkActive="active">
Behavior:
  • Adds the active class when the route matches
  • Removes the class when navigating away
  • Works with the CSS rule nav a.active

​
RouterLinkActiveOptions

Controls how route matching works: 
<a routerLink="/" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{exact:true}">
Options:
  • exact: true - Only match if the route is exactly /
  • exact: false (default) - Match if the route starts with /
Use exact: true for the root route (/) to prevent it from being active on all routes, since all paths start with /.
The navbar provides access to all four pages:
LinkRouteComponentExact Match
Contador/CounterPageYes
Hero/heroHeroPageComponentNo
Dragonball/dragonballDragonballPageNo
Dragonball Super/dragonball-superDragonballSuperPageNo

​
Usage in App Component

The Navbar is used in the main App component:
app.ts
import { Component, signal } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { Navbar } from "./components/shared/navbar/navbar";

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navbar],
  templateUrl: './app.html',
  
})
export class App {
  protected readonly title = signal('Miguel');
}
app.html
<app-navbar></app-navbar>   
 <router-outlet />
<footer>Soy un footer</footer>
Layout structure:
  1. Navbar at the top
  2. <router-outlet /> for page content
  3. Footer at the bottom
The App component imports both RouterOutlet (for rendering routed components) and Navbar (the navigation component) in its standalone imports array.

​
Router Configuration

The routes are defined in app.routes.ts and match the navbar links: 
export const routes: Routes = [
  { path: '', component: CounterPage },
  { path: 'hero', component: HeroPageComponent },
  { path: 'dragonball', component: DragonballPage },
  { path: 'dragonball-super', component: DragonballSuperPage },
];

​
Key Patterns

​
Standalone Component with Directives

Import router directives directly in the component: 
imports: [RouterLink, RouterLinkActive]

​
Exact Matching for Root Route

Always use exact matching for the root route: 
<a routerLink="/" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{exact:true}">

​
Inline Styles in Template

You can include <style> tags directly in the template file: 
<style>
  /* component styles */
</style>
<nav>...</nav>

​
Key Takeaways

  1. Shared components - Reusable across the application
  2. RouterLink - Declarative navigation without full page reloads
  3. RouterLinkActive - Automatic active state management
  4. Exact matching - Essential for root routes to prevent always-active state
  5. Standalone imports - Import router directives directly in the component
  6. Flexbox layout - Modern CSS for responsive navigation
  7. Visual feedback - Active route styling improves UX

Build docs developers (and LLMs) love

Get started for freeTalk to us