Angular Basics: How to Add Routing

Getting from one page to another is a pretty fundamental task for a webapp. Fortunately, Angular has excellent support for routing.

If you’re creating an Angular application with multiple pages, you need to use routing to navigate between them. You can do this by creating a list of routes with a path for each page in the routing module.

You can then route to other pages within an HTML file by using an anchor tag. You can also route to other pages within a TypeScript file, using the router.navigate() method.

How to Create a New Page in an Angular Application

First, create a new Angular application. You can also use an existing one. If you are unfamiliar with how to create a new Angular app, you can learn about it along with other introductory concepts used in Angular.

1. Create a new component in your Angular app using the ng generate component command:

   ng generate component home

2. Open the src/app/home/home.component.html file, and replace the current content with new content.

   <div class="content">
   <h2> Home </h2>
   <p>
   I am a photographer that does wedding photography. Check out my projects!
   </p>
   <div class="card">
   <h4> John & Amy </h4>
   <p> Blue Mountains, Australia </p>
   </div>
   <div class="card">
   <h4> Ross & Rach </h4>
   <p> Hunter Valley Gardens, Australia </p>
   </div>
   </div>

3. Populate the src/app/home/home.component.css file with styling for the HTML content.

   .content {
   line-height: 2rem;
   font-size: 1.2em;
   }
   .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   width: 400px;
   padding: 16px;
   margin: 24px 0px;
   background-color: whitesmoke;
   font-family: sans-serif;
   }

4. Create another component using the ng generate component command in the terminal. You will use the new component as an about page.

   ng generate component about

5. Open the src/app/about/about.component.html file, and replace the current content with new content.

   <div class="content">
   <h2> About Me </h2>
   <p>
   I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
   </p>
   <a href=""> Facebook </a> <br>
   <a href=""> LinkedIn </a> <br>
   <a href=""> Instagram </a> <br>
   </div>
   

6. Populate the src/app/about/about.component.css file with styling for the HTML content.

   .content {
   line-height: 2rem;
   font-size: 1.2em;
   }
   

How to Navigate Between the Two Pages

You can use routing to navigate from one page to another. You can configure this in a routing file. This example will have one routing file for the entire app, located in src/app/app-routing.module.ts.

1. If your app does not already have the app-routing module file, you can generate one using the ng generate module command. In a command line or terminal, navigate to the root folder of the application and run the following command:

   ng generate module app-routing --module app --flat

2. This will create an app-routing.module.ts file in your src/app folder.

3. At the top of the file, add additional imports for the Home and About components. Ensure that you also import RouterModule and CommonModule; ultimately, your import statements should look like:

   import { CommonModule } from '@angular/common';
   import { Routes, RouterModule } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component'; 

4. Underneath the imports, add a new routes array to store the paths that you will use when routing to each page.

   const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'about', component: AboutComponent }
   ];

5. Replace the NgModule block with the following, which adds the RouterModule to the imports and exports array.

   @NgModule({
   declarations: [],
   imports: [
   CommonModule,
   RouterModule.forRoot(routes)
   ],
   exports: [RouterModule]
   })

6. In the src/app/app.component.html file, remove the current content, and add the router-outlet tag.

   <div class="container">
   <router-outlet></router-outlet>
   </div>
   

How to Navigate to the New Page in an HTML File

To navigate to a page within an HTML file, use the anchor tag. In the href attribute, add the path that you specified in the routes array.

1. In the src/app/app.component.html file, add two anchor tags before the container div. This will allow you to navigate between the Home and About pages.

   <div class="navbar">
   <a class="link" href="">Home</a>
   <a class="link" href="/about">About</a>
   </div>
   

2. Add some styling to the src/app/app.component.css file.

   .container {
   margin: 48px 35%;
   font-family: "Arial", sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   }
   .navbar {
   background-color: darkslategray;
   padding: 30px 50px;
   display: flex;
   align-items: center;
   font-family: sans-serif;
   }
   .link:first-of-type {
   margin-right: 32px;
   }
   .link {
   color: white;
   text-decoration: none;
   font-size: 14pt;
   font-weight: bold;
   }
   

3. Add some styling to the overall page margin in src/styles.css.

   body {
   margin: 0;
   padding: 0;
   }

4. In a command prompt or terminal, navigate to the root folder of the Angular application. Run the application using the ng serve command, and wait for it to finish compiling.

   ng serve

5. In a browser, type in the localhost URL into the URL bar to view your application. By default, this is usually http://localhost:4200/.
6. Your website will load onto the Home page.

7. You can navigate to the About page by clicking on the About link in the navigation bar.

How to Navigate to the New Page in a TypeScript File

So far, this demo uses standard HTML links to provide navigation. To navigate using TypeScript file instead of the HTML file, you can use router.navigate().

1. In the src/app/app.component.html file, remove the anchor tags and replace them with button tags. These buttons will have a click event that triggers a function called clickButton(). When you call the clickButton() function, add the URL route path as an argument.

   <button class="link" (click)="clickButton('')">Home</button>
   <button class="link" (click)="clickButton('/about')">About</button>
   

2. Add some styling to the buttons in the src/app/app.component.css file.

   button {
   background-color: black;
   padding: 4px 8px;
   cursor: pointer;
   }

3. At the top of the src/app/app.component.ts file, import the router.

   import { Router } from '@angular/router'; 

4. Add a new constructor inside the AppComponent class, and inject the router within the parameters.

   constructor(private router: Router) {
   }

5. Underneath the constructor, create a new function called clickButton(), which will navigate to the new page based on the URL that you pass in.

   clickButton(path: string) {
   this.router.navigate([path]);
   } 

   ​​​​​​

6. Re-run the ng serve command in the command prompt or terminal.

   ng serve

7. Navigate to your website in a browser. The href is now replaced with two buttons.

8. Click on the About button. It will route to the About page.

Creating Multiple Pages in an Angular Application

You can route between multiple pages within an Angular application by using routing. If you have separate components for each page, you can configure paths for your routes within the routing module.

To navigate to another page via an HTML file, use an anchor tag with the href attribute as the routing path to that page. To navigate to another page via a TypeScript file, you can use the router.navigate() method.

If you are building an Angular application, you can utilize Angular directives. These allow you to use dynamic if-statements, for-loops, or other logical operations within the HTML file of a component.