RouterLink for navigation in Angular - Mini Project: Build & Apply

RouterLink for navigation

📖 Scenario: You are building a simple Angular app with two pages: Home and About. You want users to click links to move between these pages without reloading the whole website.

🎯 Goal: Create navigation links using Angular's RouterLink directive to switch between Home and About pages smoothly.

📋 What You'll Learn

Create a basic Angular component with a navigation menu

Add a variable to hold the route paths

Use RouterLink directive to link to Home and About routes

Add the final router-outlet tag to display routed components

💡 Why This Matters

🌍 Real World

Most Angular apps use RouterLink to let users move between pages smoothly without full page reloads, improving user experience.

💼 Career

Understanding RouterLink is essential for Angular developers to build multi-page apps with clean navigation and good performance.

1

Create the routes object

Create a constant called routes that is an array with two objects: one with path set to '' and component set to HomeComponent, and another with path set to 'about' and component set to AboutComponent.

Angular

# Your code here

Need a hint?

Think of routes as a map telling Angular which component to show for each URL path.

2

Add a variable for navigation links

Create a variable called navLinks that is an array with two objects: one with label set to 'Home' and path set to '', and another with label set to 'About' and path set to 'about'.

Angular

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

# Your code here

Need a hint?

This variable will help you create clickable links in the template.

3

Use RouterLink in the template

In the component template, write a <nav> element containing an <a> tag for each item in navLinks using *ngFor="let link of navLinks". Add the [routerLink] directive binding to link.path and display link.label inside the <a> tag.

Angular

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

const navLinks = [
  { label: 'Home', path: '' },
  { label: 'About', path: 'about' }
];

Need a hint?

Use Angular's *ngFor to loop over navLinks and [routerLink] to set the link path.

4

Add the router-outlet tag

Add the <router-outlet></router-outlet> tag below the <nav> element in the template to display the routed components.

Angular

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

const navLinks = [
  { label: 'Home', path: '' },
  { label: 'About', path: 'about' }
];

@Component({
  selector: 'app-root',
  template: `
    
      {{ link.label }}
    
    
  `
})
export class AppComponent {}

Need a hint?

This tag tells Angular where to show the page content for the current route.