Instructor: This is a very simple Angular application where I'm having here two components. They are already registered within our ng module. Let's go back here to our app component HTML and quickly instantiate both of them. You can see they get rendered on the page correctly.
Assume these represent different kind of states our application might be in. When the user navigates to the home part of our application, we want to show this component. When he wants to get information about our application, we want to show this component.
Obviously, we could do this with some kind of ng-if statements and then switch the components on and off, but that is obviously not scalable when our application gets more and more components.
Rather, what we want to do is to use the routing mechanism. We have the router already installed. The first step is to import a RouterModule directly from Angular's router package. Next, we can go down here in the module section and use the RouterModule.forRoot, where we then register different kind of routes.
Obviously, those routes need to be defined. Let's create here an array. Let's also import here the correct types, always from the router package, and define our first route. Let's say whenever the user navigates to home, we want to show the home component.
As you can see here, I am defining here a path which defines the URL, which the router has to verify. Once the URL is matched, he should activate this component. Similarly, whenever the user navigates to the about, we want to show the about component. Now, let's save this.
We also need to reference these routes here in the RouterModule configuration. From that point of view, the setup is done. We need to do a final part, which is to go in our app component and specify where those dynamic routing components should be inserted. For that purpose, we can use the RouterOutlet.
Now, when we change the URL to go to home, you can see that the home component gets activated. In fact, if we inspect here, we can see here the RouterOutlet. Just below the RouterOutlet, the component will get inserted by the router dynamically. Similarly, if we change to about, the about component gets inserted dynamically below the RouterOutlet.