Made withAngularClip

Angular Tutorial - 23 - Routing and Navigation

C

Codevolution

Creator on the Angular channel

Watch on YouTube ↗

946K viewsJan 15, 201812:51 runtime

Learn the fundamentals of routing and navigation in your Angular applications. This tutorial walks you through setting up a project with the Angular Router, generating separate components for different views, and configuring routes in the AppRoutingModule. Discover how to use…

Chapters

#angular#clip#frontend

Core Concepts of Angular Routing

The Angular Router enables navigation between different component views in a Single Page Application (SPA). Navigation can be triggered by URL changes or user actions like button clicks.

Step-by-Step Implementation

1. Project Setup

Use the Angular CLI with the --routing flag: ng new routing-demo --routing.
This automatically sets up the necessary files for routing.

Important
If adding routing to an existing app, you must manually:

Add <base href="/"> inside the <head> tag of index.html.

Create an app-routing.module.ts file.

Import AppRoutingModule into your main app.module.ts.

2. Component Generation

Create the components that will act as your different views or pages.
ng generate component department-list
ng generate component employee-list

3. Route Configuration (`app-routing.module.ts`)

Define your application's routes in the routes constant, which is an array of Route objects.
Each route object maps a path (the URL segment) to a component to display.
The RouterModule.forRoot(routes) method registers your routes with the application.

Example:

const routes: Routes = [
  { path: 'departments', component: DepartmentListComponent },
  { path: 'employees', component: EmployeeListComponent }
];

4. Displaying Routed Views (`<router-outlet>`)

The <router-outlet> is a directive from @angular/router that acts as a placeholder.
Angular dynamically renders the component for the current route inside this directive.
Place <router-outlet> in your app.component.html or another shell component where you want the views to appear.

5. Implementing Navigation UI

Use anchor tags <a> with a special directive to create navigation links.
routerLink: Specifies the path to navigate to when the link is clicked. The value is the path string defined in your route configuration (e.g., routerLink="/departments").
routerLinkActive: Applies one or more CSS classes to the element when its corresponding routerLink is active. This is useful for styling the currently selected navigation item (e.g., routerLinkActive="active").

Best Practice: Centralize Component Declarations

To avoid importing the same routed components in both app-routing.module.ts and app.module.ts, create and export a constant array of these components from the routing module.

Tip

In app-routing.module.ts:

export const routingComponents = [DepartmentListComponent, EmployeeListComponent];

In app.module.ts:

import { AppRoutingModule, routingComponents } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    ...routingComponents // Use the spread operator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // ...
})
export class AppModule { }

This keeps your module declarations cleaner and easier to manage as you add more routes.

Introduction to Angular Routing

Alright guys, in this video let's start learning about routing and navigation in Angular. Now, any Angular application you build is going to have multiple components, each component with its own view. So we need a way to navigate between the different views as and when the user performs some action. And for this purpose, we make use of Angular's router.

I want to mention here that even though we did learn about services, I am not going to use services while explaining the different concepts of routing. I want to focus on routing and routing alone. So we will be using hard coded data for our examples. And there is a lot to learn about Angular's router, so let's learn one concept at a time.

Tutorial Goal & Implementation Steps

In this video, we are going to learn how to navigate between two different views with button clicks. So when the user navigates to the URL localhost:4200, we display a title that says 'Routing and Navigation'. And below the title, we are going to have two buttons. The first one says 'Departments', the second says 'Employees'.

If we navigate to the URL localhost:4200/departments or click on the Departments button, we display a list of departments. If we navigate to the URL localhost:4200/employees or click on the Employees button, we display a list of employees. So based on the URL or which button the user clicks, we navigate to the appropriate view.

Now, to implement this requirement, here are the steps. First, we generate a new project using Angular CLI with the routing option. Second step, we generate the department list component and employee list component. These are the components we want to display in the view. Third step, we configure the routes for our application. This will allow us to navigate to the routes from the URL. Third step, we add buttons and use directives to navigate to the configured roads.

Step 1: Generating a Project with Routing

So let's begin with step one: generating a new application. I'm going to go back to Visual Studio Code, and I am in the angular project folder. Open the integrated terminal and type the command: ng new followed by the project name. I'm going to call this project routing-demo. And since this is an application with routing, we also include the routing option: --routing. Alright, so the project was successfully created.

Now, we might not always generate a new application with the routing option. We might want to add routing to our existing application as well. So let me go over what the routing option does, and you can replicate the exact same code in your existing application as well.

Now, the first thing you need to include is the base tag in your index.html file. So in the source folder, open index.html, and as a child to the head tag, add a base tag and set the value of href attribute to a forward slash. This is required so that the application knows how to construct the URLs while navigating.

Next, in the app folder, create a new file: app-routing.module.ts. This file contains the routing module for our application. This is where we configure the different routes. We will come back to this in a bit.

Finally, import AppRoutingModule in app.module. So in app.module.ts, import AppRoutingModule and add it to the imports array so that it is part of the routing-demo application. All right. So that is our first step: generate a new angular application with the routing option.

Step 2: Generating Feature Components

The second step is to generate the department list and employee list components that we will be navigating to. So in the terminal, navigate inside the project folder: cd routing-demo. Run the command: ng g for generate, c for component, department-list, -it for inline template, -is for inline style.

Similarly, ng g for generate, c for component, employee-list, -it for inline template, -is for inline style. So that is our second step: generating the two components.

Step 3: Configuring the Routes

The third step is to configure the routes for the application, and we do that in the app routing module. So we have a constant routes, which is strongly typed to Routes from the router package. Here we define all possible routes for our application, and each route is nothing but an object. The object contains a path which is reflected in the URL, and the component to be rendered when we navigate to that corresponding path.

Now we need to configure two routes for our application. The first one is Department, and the second one is Employees. So in the first route, enter the path as 'department', and in the second route, enter the path as 'employees'. If we navigate to 'department', we need to display the DepartmentListComponent. We specify the component property. Similarly, if we navigate to 'employees', we need to display the EmployeeListComponent. Make sure to import the two components as well.

But by doing so, we are duplicating the import statements. We have the same import statements in both AppRoutingModule and AppModule. So what I like to do is create an array of all the routing components, export it, and then import it in the module. So I'm going to create a new constant and export it: export const routingComponents and this is going to be equal to an array of the two components: DepartmentListComponent and EmployeeListComponent. And then in the app module, we import it. So import { AppRoutingModule, routingComponents } from './app-routing.module.ts'. I'm going to remove the two import statements and in the declarations array I'm going to replace them with the routingComponents. So now anytime we add a new component for routing, you just have to specify in the routing module. So this is a good practice and I recommend you do the same. All right.

Understanding the Router Outlet Directive

The routes have been configured. If you navigate to localhost:4200/department, we display the department list component, and localhost:4200/employees, we display the employee list component. But hang on, how are we specifying where these components have to be displayed? The answer is the router-outlet directive.

So if we take a look at app.component.html, at the very bottom you see this directive, router-outlet. This directive is available from the router package, and it marks where the router displays a view. So you can say that the router view goes here.

Now, let me also simplify the app.component.html. We don't need these unwanted HTML markup. So I'm going to remove it, remove the h2 tag as well, remove the image, and instead of 'Welcome to title', our title is going to be 'Routing and Navigation'. Alright, now our application is ready to be tested. Let's save this and run the application: npm start.

Open your browser and navigate to localhost:4200 and you should be able to see 'Routing and Navigation'. If I change the URL to /departments, you can see the department list component being displayed. And if I change the URL to /employees, you can see that the employee list component is being displayed. So routing is working as expected. Based on the URL, the corresponding component is displayed.

But we cannot expect the user to navigate to the components by typing out the URL, so let's add some buttons to navigate between these views.

Let's go back to app.component.html. I'm going to add a nav tag, and within the nav tag, two anchor tags: Department, Employees. To make routing possible with these anchor tags, we use two special directives from the router package.

The first one is the routerLink directive, which specifies the path to which we want to navigate to. So when we click on the departments button, we want to navigate to the /departments path. Similarly, when we click on the employees button, we navigate to the /employees path.

The second directive is the routerLinkActive directive. This directive lets you specify one or more CSS classes that will be applied when the corresponding router link is active, or in simpler terms, you click on the anchor tag and the class specified over here gets applied to the anchor tag. For our example, I'm going to use the active class. If you take a look at styles.css, you can see that for the active class, we just change the color, and the code is available on my GitHub repo, so don't worry about the rest of the classes here. And let me add the directive to the employees button as well.

Now let's save this and take a look at the browser. So, localhost:4200, and we see the title 'Routing and Navigation' and the two buttons, 'Department' and 'Employees'. If I click on 'Department', the URL changes and the Department list component is displayed. You can also see that the button font color is changed because the active class is now applied to this anchor tag. If I click on 'Employees', the URL changes to /employees and the employee list component is displayed. The active class is now applied to this anchor tag and hence you see the change in font color. So we have implemented basic routing in our Angular application.

Summary of Key Steps for Angular Routing

Let me quickly remind you of the steps. In index.html, add the base tag and set href to a forward slash. In the AppRoutingModule, configure the routes. Each route has a path and the corresponding component. Once you have the routes defined, pass it as an argument to the forRoot method of the RouterModule. Export the AppRoutingModule and the routingComponents. Import it in the app module and include it in the imports array and the declarations array. With this setup, you can navigate to the particular route by directly typing in the URL. To navigate via buttons, use the routerLink directive and specify the path. To change the style of the active route, use the routerLinkActive directive.

Alright, so that is how you navigate between different views using button clicks. Thank you guys for watching. Don't forget to subscribe. I'll see you guys in the next video.