Rashi Chouksey

  Angular Routing

May 17, 2022
  • Routing basically means navigating between pages. As users perform application tasks, they need to move between the different views that you have defined.
  • To handle the navigation from one view to the next, you use the Angular Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view.Here the pages that we are referring to will be in the form of components

Learn about Angular routing:-

We are certain that you’ve observed that the URL of the application that you’re using changes every time you click on a link on the user interface. This is because you’re navigating throughout the application, and it achieves this with the help of a common mechanism called Routing.

Navigating to the Login Page of a Web Application: 

The aim of the demo is to create routes for the login option on the navigation bar of an application. 

Steps:

Step1:  Create an application folder using the command. 

ng create <name_application>

Step 2: 

Make sure that it includes the base tag in the index.html file of your application. Although this is generally added when your app is created, if it’s not, then add a base tag with href attribute set to a forward slash. It requires this so that the application knows how to construct the URL while navigating. 

<base href=”/”>

Step 3: 

The app.routing.module.ts contains the routing module for the application. This app is used to configure differently. We should import this module in the app.module.ts file. 

import { AppRoutingModule } from ‘./app-routing.module’;

Also, make sure to specify the module in the import array. 

Step 4:

Generate the component to display the login page content. I have used Bootstrap to define the user interface for this file. We highly recommend you check out the article and/or video tutorial on Angular Bootstrap

ng g c login 

Here’s the code for the login.component.html file:

<div class="wrapper fadeInDown">
   <div id="formContent">
       <!-- Tabs Titles -->
       <!-- Icon -->
       <div class="fadeIn first">
           <img src="assets/Logo.png" id="icon" alt="User Icon" style="height: 100px; width: 250px;" />
       </div><br><br>
       <!-- Login Form -->
       <form>
           <input type="text" id="login" class="fadeIn second" name="login" placeholder="login"><br><br>
           <input type="text" id="password" class="fadeIn third" name="login" placeholder="password"><br><br>
           <input type="submit" class="fadeIn fourth" value="Log In">
       </form><br>
       <!-- Remind Passowrd -->
       <div id="formFooter">
           <a class="underlineHover" href="#">Forgot Password?</a>
       </div><br>
       <div id="formFooter">
           <a class="underlineHover" href="#" style="color:rgb(241, 148, 41)">New User? Register here</a>
       </div>
   </div>
</div>

Step 5: 

The next step is to configure the route for the application. 

import { NgModule } from ‘@angular/core’;

import { RouterModule, Routes } from ‘@angular/router’;

import { LoginComponent } from ‘./login/login.component’;

const routes: Routes = [ 

  {path: ‘login’, component: LoginComponent},

]

@NgModule({ 

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

The constant routes are strongly typed to Routes from the router package. It defines all the possible routes in this array Each route is nothing but an object with a path (that is seen in the URL) and the component to be rendered when you navigate to that corresponding path. Go ahead, and create a path for your Login component and specify the component property. 

Step 6: We saw that a navigation bar was present at the top of the web application with different options. So, I’ve created a component called navbar for the same. I’ve used the bootstrap template in the navbar.component.html file.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <div class="container">
     <a class="navbar-brand" href="#">Simplilearn</a>
<button class="navbar-toggler" type="button" 
data-toggle="collapse" data-target="#navbarResponsive" 
aria-controls="navbarResponsive" aria-expanded="false" 
aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
</button>
     <div class="collapse navbar-collapse" 
id="navbarResponsive">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
           <a class="nav-link" href="#”>Home</a>          
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">About</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Services</a>
         </li>
         <li class="nav-item">
           <nav>
             <a class="nav-link" href="#" routerLink = "/login" routerLinkActive= "active">Login</a></nav>
         </li>
       </ul>
     </div>
   </div>
 </nav>

To navigate to the login page, we have created a button within a nav tag and an anchor. Two directives from the router package called router Link and routerLinkActive are specified within the anchor tag. The former holds the path to the login page and the latter specifies one or more CSS classes that will be applied when the corresponding router link is active. 

We’ve highlighted the code for better visibility. 

Step 7:

 Despite all of this, how are we specifying where these components are to be displayed? The answer is the router-outlet directive from the router package. In the app.component.html, go ahead and create a custom tag for the same. 

  <app-navbar></app-navbar>

  <router-outlet></router-outlet>   

Step 8: 

Go ahead and run your application using the ng serve command. 

output

Once the login icon on the navigation bar is clicked, the UI changes to this: 

As you can see, the path to the login component is specified in the URL. 

So this was a simple step to demonstrate Angular routing. You can create multiple such routes and interactive components.

Share

You may also like...