The RouterOutlet Placeholder

We’re able to load the <app-home-main> component in the app’s template. However, it’s not what we’re aiming for. We want to load it if the client is requesting the homepage. The Angular Router can help us with this. First, we’ll need to make some modifications to our modules.

Understanding routing

Routing is the idea of tying components to a path in the URL. URLs are mainly comprised of a domain and a path.

Other things make up a URL, but I’m keeping it simple to explain how routes work. The path portion of a URL is where we request specific resources from a server. When the server serves our application, Angular will grab the path from the URL. It will match the path against the routes registered in our application.

Angular will not magically know which path should render which component. It’s our responsibility to tell Angular what to render when a specific URL is visited. This process is what’s known as routing.

It’s not necessary to add routing to an application, but there are a lot of benefits to doing so. Some benefits are:

• Separating the content into different areas
• Protecting areas of an app based on a specific set of rules
• Easier to maintain

Imagine navigating around an app. For example, let’s say you’re on an e-commerce site. Some things you might do is click on products, view your cart, or checkout. Each of these actions would lead you to different pages. If we built an app like this, there would be a lot of problems if we didn’t dedicate URLs to each page.

• You can’t refresh the page and keep your location within the app.
• You are unable to bookmark a page and revisit it.
• You are unable to share a page with other people.

By adding routes, these issues are non-existent. A URL can point to a specific resource in our application. Angular comes with a routing feature to help us build custom URLs in our application.

Routing module

We created a module in the previous lesson with the --routing option in the command. It generated two modules, one of them with -routing in its name. Modules with -routing in their name are called routing modules.

Routing modules are responsible for defining new routes and configuring the router. Every routing module is tied to another module. Angular recommends routing module to have a parallel name to its companion module using the suffix -routing.

For example, if we have a module called home, it’s routing module should be called home-routing. The CLI takes care of adding the suffix for us.

Adding a new route

Routes must be defined in routing modules. We’ll define our first route in the home-routing.module.ts file. In this file, there’s a variable called routes. It’s set to an array. Let’s modify it to the following:

In the routes array, we’re adding in an object with two properties. The path property represents the path in the URL. An empty string is the same as passing in a forward slash. We’re creating a route for the homepage, so an empty string suits our case.

If the path in the address bar matches the path in this route, Angular will load the component in the component option. In this case, we’re telling it to load the HomeMainComponent.

We’ll need to update the HomeModule next. We’ll remove the HomeMainComponent from the exports option.

We’re not exporting the component anymore because the Router will take care of loading the component for us if the route is visited.

RouterOutlet

The Angular Router provides us with a directive that will act as a placeholder for the component. In the app.component.html template file, we’ll replace the contents with the following:

<router-outlet></router-outlet>

The <router-outlet> is a placeholder for the component. The router will replace this placeholder with the component associated with the current browser’s URL. By using this placeholder, we don’t have to export the component. Instead, we can export the module.

We’ve updated a lot of files. Let’s look at a diagram to examine things.

The HomeRoutingModule is a routing module where we can define routes. We have one route where we’ll check if the client is requesting the homepage. If they are, we’ll load the HomeMainComponent.

The home routing module needs to be imported in a module. The home module imports it. Then, we import the home module in the app module. In the app component’s template file, we use the router-outlet directive to load the component registered by the path.

Linking the modules together will result in the HomeMainComponent loading on the page. One important point to make is that the HomeMainComponent can’t be used in the app component’s template file because it’s not exported anymore. Instead, the router is loading the component for us with the placeholder.

Here’s the updated code:

Running the example will show that the HomeMainComponent component is rendering without a problem.