title: Angular - Redirect to Login after register and show a message
body: <p>I'm working on an Angular and Spring Boot app and I'm very new to Angular. I've made some components, a component for login and one for register, also I've made some validation, etc. Now, what I want to do is when the user registration is successfully the user is redirected to login page and also I want to show a message like this: "Registration Successful! Please Login!" I know how to redirect the user to the login page but I don't know how to show this message for the user.</p>
  
  <p>Register ts</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { User } from '../model/user.model';
  import { UserDataService } from '../service/data/user-data.service';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
    invalidRegister = false;
    errorMessage = '';
    pass1 = '';
    pass2 = '';
    userName: string;
    emailAddress: string;
    user: User;
  
    @ViewChild('f') signupForm: NgForm;
  
    constructor(
      private userDataService: UserDataService,
      private router: Router) { }
  
    ngOnInit() {
    }
  
    onSignup(form: NgForm) {
      if (this.signupForm.valid === false) {
        this.invalidRegister = true;
        this.errorMessage = 'You must fill in all the fields!';
      } else if (this.pass1 !== this.pass2) {
        this.invalidRegister = true;
        this.errorMessage = 'The passwords do not match!';
      } else {
        this.user = new User(this.userName, this.emailAddress, this.pass1);
        console.log(this.user);
        this.userDataService.addUser(this.user).subscribe(
          data =&gt; {
            console.log(data);
          }, 
          error =&gt; {
            if (error.error.email === "duplicated") {
              this.invalidRegister = true;
              this.errorMessage = 'The email address you have used is already registered!';
            } else if (error.error.username === "duplicated") {
              this.invalidRegister = true;
              this.errorMessage = 'The username is not available!';
            }
          },
          () =&gt; {
            this.invalidRegister = false;
            this.router.navigate(['login']);
          })
      }
    }
  
  }
  </code></pre>
  
  <p>Register html</p>
  
  <pre><code>&lt;h1&gt;Register&lt;/h1&gt;
          &lt;div class="alert alert-warning" *ngIf="invalidRegister"&gt;{{ errorMessage }}&lt;/div&gt;
          &lt;form (ngSubmit)="onSignup()" #f="ngForm"&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label for="username" class="col-2 col-form-label"&gt;Username&lt;/label&gt;
                  &lt;div class="col-6"&gt;
                      &lt;input 
                          type="text" 
                          id="username" 
                          name="username" 
                          ngModel 
                          class="form-control" 
                          required
                          #username="ngModel"
                          [(ngModel)]="userName"&gt;
                      &lt;span 
                          class="help-block text-danger" 
                          *ngIf="!username.valid &amp;&amp; username.touched"&gt;The username field is required!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label for="email" class="col-2 col-form-label"&gt;Email&lt;/label&gt;
                  &lt;div class="col-6"&gt;
                      &lt;input 
                          type="email" 
                          id="email" 
                          name="email" 
                          ngModel 
                          class="form-control" 
                          required
                          email
                          #email="ngModel"
                          [(ngModel)]="emailAddress"&gt;
                      &lt;span 
                          class="help-block text-danger" 
                          *ngIf="!email.valid &amp;&amp; email.touched"&gt;Please enter a valid email!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                  &lt;label for="password" class="col-2 col-form-label"&gt;Password&lt;/label&gt;
                  &lt;div class="col-6"&gt;
                      &lt;input 
                          type="password" 
                          id="password" 
                          name="password" 
                          ngModel 
                          class="form-control" 
                          required
                          #password="ngModel"
                          [(ngModel)]="pass1"&gt;
                      &lt;span 
                          class="help-block text-danger" 
                          *ngIf="!password.valid &amp;&amp; password.touched"&gt;The password field is required!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row"&gt;
                      &lt;label for="pass" class="col-2 col-form-label"&gt;Confirm Password&lt;/label&gt;
                      &lt;div class="col-6"&gt;
                          &lt;input 
                              type="password" 
                              id="pass" 
                              name="pass" 
                              ngModel 
                              class="form-control" 
                              required
                              #pass="ngModel"
                              [(ngModel)]="pass2"&gt;
                          &lt;span 
                              class="help-block text-danger" 
                              *ngIf="!pass.valid &amp;&amp; pass.touched"&gt;Please confirm your password!&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;button class="btn btn-primary" type="submit"&gt;Sign Up&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>Login ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { BasicAuthenticationService } from '../service/basic-authentication.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    username = '';
    password = '';
    errorMessage = 'Invalid Credentials';
    invalidLogin = false;
  
    constructor(
      private router: Router, 
      private basicAuthenticationService: BasicAuthenticationService) { }
  
    ngOnInit() {
    }
  
  
    handleBasicAuthLogin() {
      this.basicAuthenticationService.executeAuthenticationService(this.username, this.password)
        .subscribe(
          data =&gt; {
            console.log(data);
            this.router.navigate(['welcome', this.username]);
            this.invalidLogin = false;
          },
          error =&gt; {
            console.log(error);
            this.invalidLogin = true;
          }
        );
    }
  </code></pre>
  
  <p>Login html</p>
  
  <pre><code>&lt;h1&gt;Login&lt;/h1&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="alert alert-warning" *ngIf='invalidLogin'&gt;{{ errorMessage }}&lt;/div&gt;
  
      &lt;div&gt;
          User Name: &lt;input type="text" name="username" [(ngModel)]="username" &gt;
          Password: &lt;input type="password" name="password" [(ngModel)]="password"&gt;
  
          &lt;button (click)="handleBasicAuthLogin()" class="btn btn-success"&gt;Login&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>