What you will learn after reading this post.
Whenever in normal HTML web page we click on a link we are navigated to specific page given in that link. When we are navigated then entire view of the application is reloaded again which cost resources and this type of application is not single page application.
In Single Page Application model(SPAs) one page is loaded and other subsequent pages are dynamically loaded as per user request. And angular is used to create single page application.
Routing is capability of angular to understand given url and change the view dynamically without loading the entire page. Only requested content is loaded from the server(In case of lazy loading of feature module).
Note: Get complete code at this link
2. Basic routing of component in Angular 7
In this section i consider that you readers are aware of creating angular components.
Step 1:
Create a angular 7 app routing by running this command ng new routing. Then cmd/terminal will ask this question if you are using angular 7 and Angular CLI 7 check your version by entering following command in TErminal/CMD ng – v. Give ‘Y‘ and press enter and you angular app will be generated with app-routing.module.ts file i.e is your routing module.
Now create a component reservation by typing following command ng g c reservation
Step 2:
Now go to your app-routing.module.ts and add below code.
What we are doing above
For using routing we have to configures Routes in RouterModule that why we are importing Routes and RouterModule by this code.
import { RouterModule, Routes } from ‘@angular/router’;
Now we have to export this “RouterModule” so that Router directive will be available in app module components by adding RouterModule to exports array of NgModule .
exports: [ RouterModule ]
Now you are create routes array of type Routes and you are giving “path” and “component” path denotes the url that will render the given component.
Step 3 :
Now go to your app.module.html add the below code
Here your are creating button which will trigger you “reservation” component and display html of reservation component in”
router-outlet“.
What we are doing here.
- routerLink : When clicked will load the given component as value.
- router-outlet : At this router-outlet component html is loaded.
Step 4 :
Now run the application using following command ng serve –open. You will ge following output.
Now click on reservation button.
When you clicked on reservation button then your reservation.component.html code is loaded in router-outlet that you provided in app.component.html. Note that url also changed to http://localhost:4200/reservation
3. Active Link In Angular 7
Active link means that link which is currently active. i.e the link which is opened in currently in browser tab. In above image we can see that /reservation is active link. Active link feature of angular enables us to add our custom css to active links. Like if we want out active link should be appeared as red for this we will follow below steps.
Step 1 :
add following css to your app.component.css.
update your app.component.html to below code
Here we are adding class .
active-link to property
routerLinkActive.Now our code will produce following result.
Check our our reservation button text got red as this is active link.
4. WildCard Routing in angular 7/ 404 Error page
In our example we have only /reservation and /passenger as valid urls and rests url are not valid for our angular application. Then to manage this situation we will create error404 component and routes all non valid urls to its html page.
Step 1 :
create a component by entering following command in your Terminal/Cmd ng g c error404
Step 2 :
Update your app-routing.module.ts to below code
Above we added path as “**” which will is wildcard and will be called each time whenever the url is not matched with all path present in routes.
NOTE: This should be last entry for your routes array. If you create it as first element for your routes array then each and every url will be redirected to error404 page even url is valid i.e is present in routes array.
5. Child Routing in Angular 7
Child routing will come into picture if you have child component then it will help in visiting your child component. In our case we have reservation component which is rendered with url /reservation but what when we have child component. Then this child component should available at this url /reservation/child.
Above scenario will be achieved by bellow steps.
Step 1 :
Create a component by this command ng g c reservation/child.
Step 2 :
Update your app-routing.module.ts to below code.
Step 3 :
Update following code in routing.component.html
Note : Router loads the child component to “router-outlet” of parent(reservation.component.html) component not in app component.
Note: Get complete code at this link
