Implementing Routes

In previous topic we have created our login page and added validation, in this topic we will cover routing in angular when user click on login button they will route to welcome page or error page.

If you remember when we create our project using "ng new" command there were some question asked i.e. do we need routing and we said Yes and then we got one file app-routing.module.ts so this is the module which will handle all the routing in our application. All the routes are configured under "const routes: Routes = [];"

First we need to create our welcome and error components for that we can use command "ng generate component welcome"  and "ng generate component error".

After generating these components now we will configure routings.

in app-routing.module.ts need to add below code:

const routes: Routes = [

{path : 'login', component : LoginComponent}

];

It means path will be http://localhost:4200/login and which component it will call, it will call loginComponent. you have import all component in app-routing.module.ts 

Similarly for welcome component and error component we need to path and component in separate curly braces {} separated by comma.

http://localhost:4200/error
http://localhost:4200/welcome
http://localhost:4200/login

if you go to these URL you can see it is not opening respective welcome and error page it will always load login page which is default. so what is the issue here ?

This is because we haven't enabled routing tag for that go to app.component.html and add <router-outlet></router-outlet> and remove<app-login></app-login>because of this login page is loaded every time. Now refresh your page and check each URL. If you hit any other URL like http://localhost:4200/login12234  there will be 
runtime error and you can check this in console of inspect window. Here you cannot show this error to your user, you need to show some meaningful message for this you need to add error message and error.component.ts and add it in error.component.html using interpolation. 

For routing to work if any other URL comes which is not mentioned in routes it will route to error page we need to add it in app-routing.module.ts see below screenshot.

Now if you hit only http://localhost:4200 then you can see nothing is loaded so for this we need to add route so that it will land to login page

{path : '', component : LoginComponent},

This will come for malicious URL.

Routing from Login Page to Welcome Page

Now If we want to redirect to welcome page from login page what do we need?

we need an instance of the angular router and we get it by using dependency injection.

The concept of dependency injection is if we need anything we need to declare it as

dependency and angular will be responsible to give it to me at runtime. In Angular

dependency injection is a built in feature and there is no need to add any libraries for that.

In our example Router is a dependency for Login Component and to get this dependency

we need to add it to constructor argument. we will create a variable router of type

Router and we will make it private as we don't want to use it outside login.component.ts

In typescript whenever we pass a parameter to a constructor that parameter is available

as a member variable to the component.

Now we will use this router to navigate from login page to welcome page for that there

is method navigate() So the navigate helps us to route to a specific page. Navigate accepts an array and the first argument inside this array is the page you want to navigate to. Code snippet below:

Now Refresh your page and login with correct username and password you can see it is routed to welcome page.

Now lets add username in the welcome page, one of the way is by adding the parameter in URL so that router can access it. so we have to enhance our app-routing.module.ts to accept username as parameter.

now URL is expecting username and this will be routed to welcome component so we have to enhance our welcome component. For that we need to add dependency called Activated Route in our welcome.commponent.ts, after adding the dependency in constructor now we can update our noOnInit() method.

There is one method snapshot which will give what all parameter do we have in the URL and we can use this to get username from URL.

Now if you click on login button you will see error because it is routed to /welcome page but we have updated our code to /welcome/:username so we need to update our login.component.ts, we have to update below code in handleLogin() method. we have to pass username as parameter.

this.router.navigate(['welcome',this.username])

After above update update your welcome.component.html file as below and refresh and

login your page

Previous Topic (Login Component)                                                               Next Topic (Create todo list)