How to redirect to another component after checking conditions in angular 8?

Question

I am new to Angular 8 and i am making a login component and after entering username password i want to redirect to another component using route thats my code i have done this much :

my login component.ts:

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

my login component html is:

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

After login i want to redirect to another component with welcome message using routing in angular 8: Thanks in advance!!!!

Answer 1

Define routes in your module file (eg. app.module):

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

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

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

And in your login component:

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

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

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

For more details refer here.

Answer 2

So if I understand correctly you want to navigate to a new page after they submit the form?

First you need to inject the Router class in your constructor. Add this in your constructor: private router: Router

And add this import: import { Router } from '@angular/router';

Now you can make use of the Router class in your TS file.

to navigate to an other page you use this syntax: this.router.navigate(['/']); The example above would to to the home page.

You can also navigate relative to some path like this: First add this to your constructor: private route: ActivatedRoute And import ActivatedRoute Then you can navigate relative to the current route like this: this.router.navigate(['../../'], { relativeTo: this.route });

this.route is the ActivatedRoute reference

For more on routing and navigation check: https://angular.io/guide/router

Answer 3

i think you you want to navigate to the new component and sending the new data to show the welcome message there, you can navigate with sending queryParams, send your username as a queryParam to welcome component, You can store the loggedin user in localstorage too if you want and avoid sending it as query parameter

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

and you can construct the message in your welcome.component.ts

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

and in your welcome.component.html

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