Learn Front-End Development and Automated Testing with Angular/

...

/

Redirecting Users

Redirecting Users

Let's update the signup component and tests so that the logged-in users are automatically redirected to the dashboard.

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.
Press + to interact
// 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
...