Guide to navigate to a different component in Angular 8 once conditions have been verified

Question

Guide to navigate to a different component in Angular 8 once conditions have been verified

Recently delving into Angular 8, I find myself crafting a login component with the intention of redirecting to another component upon entering the correct username and password. Here's what my code looks like so far:

Here is the TypeScript for my login component:

       import { Component, OnInit } from '@angular/core';
       import{FormGroup,FormBuilder,Validators} from '@angular/forms'


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  myForm:FormGroup
  submitted=false;
  _baseURL : string;
  formvalid: boolean;
   user:string;
   pwd:string;
  constructor(private formbuilder:FormBuilder){}


  ngOnInit(){
    this.myForm = this.formbuilder.group({
    username:['',Validators.required],
    password:['',[Validators.required,Validators.pattern("^(?=.*?[a-z])(.{13,}|(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,12})$")]]
    });
    this._baseURL="";
    this.formvalid=false;
  }

  Submitme(){
    this.submitted = true;

    if (this.myForm.invalid) {
      this.formvalid=false;
        return;
    }
    if (this.myForm.valid) {
      this.formvalid=true;
    this._baseURL= 'Welcome'+" "+ this.myForm.controls.username.value;
  }
  this.user=this.myForm.controls.username.value;
  this.pwd=this.myForm.controls.password.value;
}
rest(){
  this.myForm.reset();
  this.submitted = false;
}
}

And here is the HTML for my login component:

        <h1 class="text-center" [hidden]="formvalid">Login</h1>
          <form [formGroup]="myForm" (ngSubmit)="Submitme()" class="text-center">
           <div class="container bg-dark" [hidden]="formvalid" style="border: 1px solid black;">
         <div class="row mt-3">
           <div class="col-lg-5">
         <label for="name" class="text-white">Username :</label>
         </div>
         <input type="text" formControlName="username" class="col-lg-4 form-control"
           [ngClass]="{ 'is-invalid': submitted &amp;&amp; myForm.controls.username.errors }">
          <div *ngIf="submitted &amp;&amp; myForm.controls.username.errors" class="text-danger">
            <div *ngIf="myForm.controls.username.errors.required">First Name is required</div>
        </div>
       </div>
     <div class="row mt-2">
           <div class="col-lg-5">
       <label for="pwd" class="text-white">Password :</label>
         </div>
      <input type="password" formControlName="password" class="col-lg-4 form-control"
      [ngClass]="{ 'is-invalid': submitted &amp;&amp; myForm.controls.password.errors }">
       <div *ngIf="submitted &amp;&amp; myForm.controls.password.errors" class="text-danger">
     <div *ngIf="myForm.controls.password.errors.required">password is required</div>
      <div *ngIf="myForm.controls.password.errors.pattern">Pwd must contain atleast one upper and 
    lower case character one special character one digit and 8 characters in length  </div>
   </div>
    </div>
     <button class="btn btn-primary mt-2 mb-3" type="submit" 
   [routerLink]="'/afterlog'">Submit</button>&nbsp;
     <input type="button" (click)="rest()" value="Reset" class="btn btn-primary mt-2 mb-3">
 </div>
      </form>

Upon successful login, the goal is to navigate to another component displaying a welcome message through Angular 8 routing mechanisms. Appreciate any assistance!

angular typescript angular8

Answer 1

Answer №1

Create routes within your module file (for example, app.module):

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'welcome', component: WelcomeComponent },
];

@NgModule({
   imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})

In your login component:

import { Router } from '@angular/router';

constructor(private formbuilder: FormBuilder, private _router: Router) { }

Submitme() {
  ...
  this._router.navigateByUrl('/welcome');  // navigate to welcome component
}

For more information, visit this link.

Answer 2

Create routes within your module file (for example, app.module):

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'welcome', component: WelcomeComponent },
];

@NgModule({
   imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})

In your login component:

import { Router } from '@angular/router';

constructor(private formbuilder: FormBuilder, private _router: Router) { }

Submitme() {
  ...
  this._router.navigateByUrl('/welcome');  // navigate to welcome component
}

For more information, visit this link.

Answer 3

Answer №2

It seems like you are trying to navigate to a new component and pass along some data to display a welcome message there. One way to achieve this is by using queryParams to send your username as a parameter to the welcome component. Alternatively, you can also store the logged-in user in localStorage instead of sending it as a query parameter.

this.router.navigate(['/welcome'], { queryParams: { username: this.myForm.controls.username.value} });

You can then retrieve and use the username in your welcome.component.ts file:

username: string;
constructor(private route: ActivatedRoute) {
    this.username = this.route.snapshot.paramMap.get('username');
}

In your welcome.component.html file, you can display the welcome message with the username:

<div>Welcome {{username}}!</div>

Answer 4

It seems like you are trying to navigate to a new component and pass along some data to display a welcome message there. One way to achieve this is by using queryParams to send your username as a parameter to the welcome component. Alternatively, you can also store the logged-in user in localStorage instead of sending it as a query parameter.

this.router.navigate(['/welcome'], { queryParams: { username: this.myForm.controls.username.value} });

You can then retrieve and use the username in your welcome.component.ts file:

username: string;
constructor(private route: ActivatedRoute) {
    this.username = this.route.snapshot.paramMap.get('username');
}

In your welcome.component.html file, you can display the welcome message with the username:

<div>Welcome {{username}}!</div>

Answer 5

Answer №3

If my understanding is correct, you are looking to redirect to a new page after the form submission?

To achieve this, start by injecting the Router class into your constructor. Include this line in your constructor: private router: Router

Don't forget to import the Router with this line:

import { Router } from '@angular/router';

Now you can utilize the Router class in your TypeScript file.

To navigate to another page, use this snippet: this.router.navigate(['/']); In the example above, it would navigate to the home page.

You can also navigate relative to a specific path like so: Simply add this line to your constructor: private route: ActivatedRoute Ensure you import ActivatedRoute Then you can navigate relative to the current route using this code:

this.router.navigate(['../../'], { relativeTo: this.route });

This.route refers to the ActivatedRoute reference.

For more information on routing and navigation, visit: https://angular.io/guide/router

Answer 6

If my understanding is correct, you are looking to redirect to a new page after the form submission?

To achieve this, start by injecting the Router class into your constructor. Include this line in your constructor: private router: Router

Don't forget to import the Router with this line:

import { Router } from '@angular/router';

Now you can utilize the Router class in your TypeScript file.

To navigate to another page, use this snippet: this.router.navigate(['/']); In the example above, it would navigate to the home page.

You can also navigate relative to a specific path like so: Simply add this line to your constructor: private route: ActivatedRoute Ensure you import ActivatedRoute Then you can navigate relative to the current route using this code:

this.router.navigate(['../../'], { relativeTo: this.route });

This.route refers to the ActivatedRoute reference.

For more information on routing and navigation, visit: https://angular.io/guide/router

Guide to navigate to a different component in Angular 8 once conditions have been verified

Answer №1

Answer №2

Answer №3

Similar questions

Getting Started with Angular 2 Installation

Strategies for managing various errors that can arise when multiple Angular components are subscribed to a single state

How to conceal parameters in Angular URL?

Angular 7 data update causing issues with Bootstrap carousel functionality

Error message: "Angular requires either importing or local installation"

How to attach input to function invocation in Angular 2

The Ion-item-option button requires two clicks to activate

Creating a personalized 404 page in your Angular Project and configuring a route for it

Verify if the transaction is present in rxjs

Unable to send a function as props to a child component in TypeScript

The Angular 2 update I posted successfully refreshes my list, however, it does not reflect any changes in

bringing TypeScript functions into another file

TypeScript does not perform type checking on arrays created using the Array() constructor and filled with the fill method

What is the best way to use hasClass in a conditional statement to display text based on the content of a different div element?

How to assign attributes to all child elements in Angular?

What is the best way to increase the size of an array and populate it with just one specific element in Types

Encountering an error while trying to implement strong typing in a function on a Node API service: 'Unexpected token ":"'

Converting an existing array into a TypeScript string literal type: A step-by-step guide

Introducing the concept of type-specific name inclusion

Develop a fresh Typescript-driven sql.js database