Angular - Navigate to Login Page post registration and display a confirmation message

As a newcomer to Angular, I am currently working on an Angular and Spring Boot application. So far, I have created components for user login and registration along with validation features. Now, my goal is to redirect the user to the login page upon successful registration and display a message saying "Registration Successful! Please Login!" However, I am unsure how to implement this message for the user.

Register ts

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';

// The rest of your TypeScript code goes here...

Register html

<h1>Register</h1>
    <div class="alert alert-warning" *ngIf="invalidRegister">{{ errorMessage }}</div>
        <form (ngSubmit)="onSignup()" #f="ngForm">

            <!-- Your HTML code for Register form goes here... -->

        </form>

Login ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BasicAuthenticationService } from '../service/basic-authentication.service';

// The rest of your TypeScript code goes here...

Login html

<h1>Login</h1>

<div class="container">
    <div class="alert alert-warning" *ngIf='invalidLogin'>{{ errorMessage }}</div>

    <div>

        <!-- Your HTML code for Login form goes here... -->

    </div>
</div>  

Answer №1

Once the registration process is completed, you have the option to include query parameters in the route and redirect to the login page

this.router.navigate(['login'], {queryParams: { registered: 'true' } });

The URL will appear as follows:

https://foobar.com/login?registered=true

In login.ts

infoMessage = '';
ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        if(params.registered !== undefined && params.registered === 'true') {
            infoMessage = 'Registration Successful! Please Login!';
        }
      });
}

Also, ensure to insert a similar line in your login.html

<span *ngIf="infoMessage.length > 0">{{ infoMessage }}</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to utilize JSON.Stringify on Scripting.Dictionary objects will result in failure

In my current ASP classic project, I have integrated the JScript JSON class available at this link. This class can interact with both VBScript and JScript, closely resembling the code provided on json.org. However, due to team manager's requirement, I ...

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

The conversion of a newline in an Angular page is done using &lt;br/&gt tag

Here is a function I have: setLocalVariableOnAccepted(ogp, hb, responseJson) { if (responseJson.ofgp === undefined) { this.ogpStatus = 'orange'; this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous va ...

What is the reason behind the input text field not preserving its value when disabled?

Currently, I am working on a basic input field that utilizes Angular within StorybookJS. However, I have encountered an issue where the input text field does not maintain its value when the disabled attribute is set to true. For example, if I manually typ ...

creating a JSON object in PHP that can be easily parsed by JavaScript

In my project, I have an extensive list of items, each item further divided into four sub-items. While it's convenient for me to organize this data in nested arrays using PHP, I encounter issues when trying to transfer them as a JSON object to the cli ...

The `pages` directory seems to be missing. Package error encountered while using NextJS

As I strive to create a NextJS executable application for Windows, an irritating error has arisen: (node:18500) UnhandledPromiseRejectionWarning: Error: > Couldn't find a pages directory. Please create one under the project root I assure you, th ...

Executing Javascript on Selenium RC with PHP is a crucial skill to have in your toolkit

Is there a way to execute Javascript from Selenium RC? I have been trying different methods with no success so far. I attempted the following approach: I created a custom function in user-extensions.js: function sayhello() { document.write('hel ...

Ways to create an object based on another object

Currently, I am teaching myself Javascript. My focus is on working with Vuejs and express for a CRUD App. In one of my components, I retrieve data from my backend using the API: localhost:3000/api/transport. The response contains all objects from the data ...

What is the best way to access and utilize an id within an angular component's routing system?

I am currently working on an Angular application, and this is my first experience with JS. I have a main view where I display several elements, such as movies, each of which is clickable and links to a detailed view of the movie. My question is how can I h ...

Dealing with reactive form controls using HTML select elements

I am working with a template that looks like this: <form [formGroup]="form"> <mdl-textfield type="text" #userFirstName name="lastName" label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*" error-msg ...

Sharing state between components in NextJS involves using techniques like Context API, passing

I am trying to pass state between pages in Next.js. In my App.js, I have wrapped it in a context provider like this: import { useRouter } from 'next/router' import { ClickProvider } from '../context/clickContext' function MyApp({ Compo ...

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Recently, I encountered an issue with dynamically loading a form via AJAX and attempting to bind the beforeSubmit event. Strangely, the event didn't seem to work as expected, causing the form to submit and the browser to navigate to a new page. This b ...

Ways to emit a value from an observable once it is defined?

Is it feasible to create an observable that can wrap around the sessionStorage.getItem('currentuser')? This way, calling code can subscribe and retrieve the value only after it has been set in the sessionStorage. Do you think this is achievable? ...

No results returned by Mongoose/MongoDB GeoJSON query

I have a Schema (Tour) which includes a GeoJSON Point type property called location. location: { type: { type: String, enum: ['Point'], required: true }, coordinates: { type: [Number], required: true ...

Basic Timer with Visual Background

Struggling to find the right CSS/script for a straightforward countdown timer, Here are the requirements: Countdown in days only, no need for hours, minutes, and seconds Ability to use a custom image as background I've scoured online searches but n ...

Interacting with a Hapi JS API through a distinct Vue JS Frontend. The data in request.payload is not defined

As I take my first steps on Hapi JS, I am facing the challenge of connecting my app to a SQL Server DB. My current task involves sending login data from a Vue CLI JS frontend to a Hapi JS Api using axios. The login process essentially consists of a "SELEC ...

Transitioning React Hover Navbar Design

I'm currently revamping a click-to-open navbar into a hover bar for a new project. I have successfully implemented the onMouseEnter and onMouseLeave functions, allowing the navbar to open and close on mouse hover. However, I am facing an issue with ad ...

Discover the latest techniques for incorporating dynamic datalist options in Angular 13 with Bootstrap 5

React 17 Tailwind CSS dynamiclist.component.html <div> <label for="{{ id }}" class="form-label">{{ label }}</label> <input class="form-control" list="{{ dynamicListOptions }}" [i ...

What could be causing my CSS and Bootstrap.css styles not to be implemented on my webpage?

While working on my Ruby on Rails application, I am trying to customize the design to resemble (which can be downloaded from ). However, I am facing an issue where the style sheets are not being applied. I have moved the style sheets from the bootstrap/c ...

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...