Angular Routing is the process of moving packets across a network from one host to another. It is usually performed by dedicated devices called routers. Angular Routing performs navigation across one page to another page when user click on any link, just like single page application.Packets are the fundamental unit of information transport in all modern computer networks,
Routing in Angular:-
Routing performs navigation across one page to another page when user click on any link, just like single page application.
Now am going to explain to step by step:
Now I’m going to create 3(three) components namely Home, About, Services as shown below .
For that am using command –
ng generate component home :
It will creates HOME component with the name of home and contains 4 files(mentioned in image). After that it will update app.module.ts file.
ng generate component about :
ng generate component contact :
In Home component
I’m adding some information in home.component.html file whereas the same information will be added in about component about.component.html and contact component contact .component.html .
If you want to see all component information you can add like this in
But this not good method we need write to routing
Step-2: app. component. Html file
Am going to add header information like.
Step-3 app. Module’s
In this file we need to import some modules Router Module & Routes from @angular/router.
After import that RouterModule & Routes then we need to add
Step-5 app. Module.ts
Next declaration section in (imports) we need to add
Step-6 app. component.html
For navigation we need to add
Throught like Navigation we need to add routerLink=” /home ”