Router outlet for view rendering in Angular - Mini Project: Build & Apply

Router outlet for view rendering

📖 Scenario: You are building a simple Angular app that shows different pages when users click navigation links. You want to display the page content inside a special placeholder area.

🎯 Goal: Create an Angular app with a router-outlet to render different views based on the URL route.

📋 What You'll Learn

Create a standalone Angular component called AppComponent with a navigation menu

Define routes for two components: HomeComponent and AboutComponent

Use router-outlet in the AppComponent template to display routed views

Configure the Angular router with the routes and import necessary modules

💡 Why This Matters

🌍 Real World

Routing is essential in web apps to show different pages without reloading the browser. Using router-outlet lets Angular swap views smoothly.

💼 Career

Understanding Angular routing and router-outlet is a key skill for frontend developers building single-page applications.

1

Create HomeComponent and AboutComponent

Create two standalone Angular components called HomeComponent and AboutComponent. Each should have a simple template with text: "Welcome to Home" for HomeComponent and "About Us" for AboutComponent.

Angular

// Create HomeComponent with template 'Welcome to Home'
// Create AboutComponent with template 'About Us'

Need a hint?

Use @Component decorator with standalone: true and simple inline templates.

2

Define routes array with Home and About paths

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

Angular

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

// Define routes array with HomeComponent and AboutComponent
const routes = [
  // Your code here
];

Need a hint?

Routes array contains objects with path and component keys.

3

Create AppComponent with navigation and router-outlet

Create a standalone Angular component called AppComponent. In its template, add two links using <a routerLink="">Home</a> and <a routerLink="about">About</a>. Below the links, add a <router-outlet></router-outlet> tag to display routed views.

Angular

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

// Create AppComponent with navigation links and router-outlet
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    
  `
})
export class AppComponent {}

Need a hint?

Use routerLink directives on <a> tags and include <router-outlet> in the template.

4

Configure RouterModule with routes in bootstrap

Import RouterModule with RouterModule.forRoot(routes) in the imports array of AppComponent. This sets up the router with the routes you defined.

Angular

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

// Add RouterModule.forRoot(routes) to imports array
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    // Your code here
  ],
  template: `
    
      Home |
      About
    
    
      
    
  `
})
export class AppComponent {}

Need a hint?

Use RouterModule.forRoot(routes) inside the imports array of @Component.