Routing Create a home page configured with the Angular Router.

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.


*Enrollment provides full access to this course (and updates) for life.

Or Signup for Unlimited PRO Access

Learn routing basics in Angular and the usage of the routerLink directive in templates.

Steps

Step 1 - Generate a Component

Generate home page component that is loaded by the router.

command line
ng g component home-page

Step 2 - Register it in the Router

file_type_ng_component_ts app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';


const routes: Routes = [
  { path: '', component: HomePageComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Example of a router link with a special CSS class when active.

file_type_html some.component.html
<a routerLink="/" routerLinkActive="some-css-class">Home page</a>

Q&A Chat