Defining a viewport

Once we have come this far, it's time to define a viewport where the routed content should be rendered. Normally, we would build an application where part of the content is static and part of it can be switched out, like so:

//app.component.html

<body>
  <!- header content ->
  <!- router content ->
  <!- footer content ->
</body>

At this point, we involve the router-outlet element. It is an element that tells the router that this is where you should render the content. Update your app.component.html to look like this:

<body>
  <!- header content ->
  <router-outlet> </router-outlet>
  <!- footer content ->
</body>

Now we have the router module imported and initialized. We also have a router list defined for two routes, and we have defined where the routed content should be rendered. This is all we need for a minimal setup of the router. In the next section, we will look at a more realistic example and further expand our knowledge of the routing module and what it can help us with.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset