Routing and navigation in Angular

Angular provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access. The Angular router is a core part of the Angular platform.

It's very easy to implement routing and navigation. So now I'm going to implement simple application for routing.

When we create project it also create  app-routing.module.ts file. Then I created 2 components call DepartmentList and EmployeeList. So now what I want is when I Press the the Employee list button I want to move Employee List form and when press the Department list button  want to  move Department List form.

First step

You must go to the app-routing.module.ts and you can see there is an array call routes. Then declare your components with name which you want appear on URL.  Don't remember import your component. And you must export your components.

If you want to redirect to page not found page when user enter the invalid component in URL you can
use that commented code. (You should create page-not-found component)

Second step

Go to the app.module.ts and remove import EmployeeList and DepartmentList componet in the top. When you create the component by default it import the component. After remove you must import routingComponent what we export from before First Step.

Also remove DepartmentList and EmployeeList from @NGModule and add routingComponent on it.

Third step

Now we only have to call components. In Angular we use routerLink for that. And we must provide name when we give name in path creating . So I call components from app.component.ts.