# 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.&#x20;

#### Prerequisites:

* [ ] [A Router Module](creating-a-routing-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, \
&#xNAN;**\<router-outlet> \</router-outlet>** .&#x20;

{% code title="app.component.html" %}
```markup
<router-outlet></router-outlet>   
```
{% endcode %}

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 \
&#xNAN;**\<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.\
&#x20;

{% tabs %}
{% tab title="app.component.html" %}
```markup
<app-about></app-about>
```
{% endtab %}

{% tab title="app-routing.module.ts" %}
```typescript
...
import { AboutComponent}  from './about/about.component';

const routes: Routes = [ 

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

 ];
 ......

```
{% endtab %}
{% endtabs %}

|    |
| -- |

## **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\
&#x20;**\<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.&#x20;

Going forward in the[ Angular Cheat Sheet ](../../angular-cheat-sheet)you can use the[ boiler plate router](../../../angular-cheat-sheet#routing-boiler-plate-starter) and this guide to copy paste your way to a working angular router setup.

##

