Router Outlet Setup

Overview

In this section we will be now working the HTML side of the routing, everything so far was to wire up the logic of the router. We have created a router module and defined its routes.

Prerequisites:

• A Router Module

• imported the router module into app.module.ts

The Router Outlet Component

We setup our routes in app-routing.module.ts and imported into our app.module.ts. Now angular needs to know where to place these components within the app. For this task we use a special angular HTML element, <router-outlet> </router-outlet> .

app.component.html

<router-outlet></router-outlet>   

Once the router has a URL match, it will try to display the corresponding matching component. For that angular will look in the template for a <router-outlet> component. The component that matches the current path is then placed where the <router-outlet> component was located.

For example if the route in the URL bar of the browser was myapp.com/about , <router-outlet> is replaced by that routes component.

app.component.html

<app-about></app-about>

app-routing.module.ts

...
import { AboutComponent}  from './about/about.component';

const routes: Routes = [ 

    { path: 'about', component: AboutComponent },

 ];
 ......

Router Setup Recap

In order to use angular routes we need to create a app-routing.module.ts, which will control what routes match which components / view. Think of components that are listed here as different pages on a website. Then after creating, app-routing.module.ts, we imported into our app.module.ts. Lastly we need to place the <router-outlet> component so angular knows where to place the component that matches the active route.

Its a lot of setup but we don't need to memorize this or fully understand how angular does. The key take away is we need routing to have different pages. You can just follow this guide for creating all the starter code.

Going forward in the Angular Cheat Sheet you can use the boiler plate router and this guide to copy paste your way to a working angular router setup.