Search⌘ K
AI Features
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Redirecting Users

Explore how to implement user redirection in Angular by injecting the Router, using the navigate method, and adjusting tests to mock routing. Understand how to redirect users to a dashboard view and ensure your tests pass smoothly by handling Router dependencies.

We'll cover the following...

Now that our new routing has been set up, we can redirect our users to this new view. First, we’re going to add this redirect to our component. Then we’ll update our tests for this new functionality.

Use the updated code below to make the changes instructed in the lesson.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Dashboard component

Update signup component

Follow the steps below to redirect our users:

  1. Import Angular’s Router.
  2. Inject the router into our component’s constructor.
TypeScript 3.3.4
// src/app/signup/signup.component.ts
import { Router } from '@angular/router';
  ...
export class SignupComponent implements OnInit {
  ...    
  constructor(private authService: AuthService, private router: Router) { }
  ...
}
  1. Remove the comment about redirecting users and utilize the router to navigate the users to the newly created dashboard. Here, call router.navigate(), passing it an array that contains the value of the path
...