Angular Routing

This tutorial demonstrates how to set up routing in an Angular application using standalone components . We’ll build a simple app with a Home, About, and Contact page.

1. Setup Your Angular Application

First, create a new Angular project:

ng new angular-routing-tutorial
// navigate to the project directory
cd angular-routing-tutorial

2. Create Standalone Components

Generate standalone components for Home, About, and Contact:

ng generate component home
ng generate component about
ng generate component contact

3. Define Routes

In a standalone Angular application, you define routes in the main.ts file.

Open src/main.ts and configure routes as follows:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Route } from '@angular/router';
import { AppComponent } from './app/app.component';
import { HomeComponent } from './app/home/home.component';
import { AboutComponent } from './app/about/about.component';
import { ContactComponent } from './app/contact/contact.component';

const routes: Route[] = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
}).catch((err) => console.error(err));

---

4. Update the AppComponent

Update the AppComponent to include a navigation menu and a router outlet.

app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="active">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
      <a routerLink="/contact" routerLinkActive="active">Contact</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: [`
    nav {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .active {
      font-weight: bold;
      color: blue;
    }
  `],
})
export class AppComponent {}

---

5. Add Content to Components

Each component can have its unique template.

Home Component (home.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `<h1>Welcome to the Home Page</h1>`,
  styles: [`h1 { color: green; }`],
})
export class HomeComponent {}

About Component (about.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  standalone: true,
  template: `<h1>About Us</h1>`,
  styles: [`h1 { color: purple; }`],
})
export class AboutComponent {}

Contact Component (contact.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  standalone: true,
  template: `<h1>Contact Us</h1>`,
  styles: [`h1 { color: orange; }`],
})
export class ContactComponent {}

---

6. Run the Application

Run the app to see it in action:

ng serve

Open http://localhost:4200 in your browser.

You should see:

• A navigation bar with links to Home, About, and Contact.
• A router outlet displaying the corresponding page when a link is clicked.

Summary of Key Points:

1. Routes are defined using provideRouter() in main.ts.
2. Each component imports only the required modules, avoiding the need for NgModules.
3. The RouterOutlet is directly included in the standalone AppComponent.