---
title: 11. Navigation and Routing Basics
tags: Angular Getting Started
image:
---

# 11. Navigation and Routing Basics

:::success
**Steps**
1. Import RouterModule and Add Path Route

2. Add routerLink in the place where you need

3. Add <router-outlet></router-outlet> in app.component.html

4. When using routerLink, selector-flag is unnecessary
:::

<br/>

[toc]

<br/>

## 1. Import RouterModule and Add Path Route

* Import RouterModule

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

<br/>

* Add Path Route

  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: 'date', component: DateComponent},
      {path: 'about', component: AboutComponent},
      {path: 'welcome', component: WelcomeComponent},
      {path: '', redirectTo: 'welcome', pathMatch: 'full'},
      {path: '**', component: PageNotFoundComponent}
    ])
  ],

<br/>

* Overall

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//import Component
import { AppComponent } from './app.component';
import { NavigateComponent } from './navigate/navigate.component';
import { DateComponent } from './date/date.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { WelcomeComponent } from './welcome/welcome.component';

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


@NgModule({
  declarations: [
    AppComponent,
    NavigateComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: 'date', component: DateComponent},
      {path: 'about', component: AboutComponent},
      {path: 'welcome', component: WelcomeComponent},
      {path: '', redirectTo: 'welcome', pathMatch: 'full'},
      {path: '**', component: PageNotFoundComponent}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<br/>

## 2. Add routerLink in the place where you need

//navigate.component.html
<ul class="nav-list">
    <li class="list-item"><a routerLink="" class="link">Home</a></li>
    <li class="list-item"><a routerLink="/date" class="link">Date</a></li>
    <li class="list-item"><a routerLink="/about" class="link">About</a></li>
</ul>

<br/>

## 3. Add <router-outlet></router-outlet>

//app.component.html
<h1>My-first-app is running</h1>
<router-outlet></router-outlet>

-> to tell the router where to render the components

<br/>

## 4. When using routerLink, selector-flag is unnecessary

//welcome.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-welcome'  //unnecessary
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})

export class WelcomeComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

<br/>

**After update**

@Component({
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})

<br/>

--------------------------------------------------------------------------
**Order matters**
* Order will affect router's display (please follow the sequence from top to bottom)

**Default Route**

{path: '', redirectTo: 'welcome', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}

* path: '' -> welcome page (default value)
* path: '**' -> the page is not found (for error page route)

--------------------------------------------------------------------------

> ng g c products/product-detail --flat

* flat means no file