The router enables us to navigate to different views on apps. Here in this article, we will learn about the basic of angular 4 routing. We have to follow the certain step to enable routing in an Angular. In our app, we want to route to have the SearchComponent rendered when the url is / or root and the AboutComponent shown when the url is /about
Step 1: Add the base tag in src/index.html
Most routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.
Step 2: Register router module in app.module.ts
Step 3: RouterOutlet Directive
We’ve configured our application so if the user navigates to /about we want the AboutComponent shown or if they navigate to the root URL / then we want the SearchComponent shown.
We need to add a directive called router-outlet somewhere in our template HTML. This directive tells Angular where it should insert each of those components in the route, we’ll add ours to the app.component.html, like so:
For the navbar is a component, in navbar.component.html we have add navigation code, we need to modify the tag in navbar.component.html as follow