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

Related searches

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


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>

Load a component in a route depending on an asynchronous , (check one with "x") bug report => search github for a similar issue or PR before condition (a condition that will be resolved later) which component to load in a route. But, doing that means you're redirecting to another route (let's say like Of course this solution can break at any point when angular is� In this post, I show you how to pass property or field from one component to another in Angular 8. Let's consider, We have Employee Management App and we want to update or view details of the particular employee then we need to pass employee unique id from one component to another.


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

Using router.navigate to navigate to another component does not , Here i am redirecting the app to another component doesnt invoking the oninit method i have checked for this issue in the web and i found the articles like below saying to add below scripts emmgfx commented on Oct 8, 2017 Angular freezes without any error when I navigate to next page from an� Usually when your app initializes it redirects to the empty route by default. Angular offers powerful routing system to redirect to your favorite routes. We setup app-routing.module.ts file to maintain redirection service in Angular. After setting up app-routing.module.ts file we can configure the Angular routing service to redirect to named URLs.


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.

Navigating to Routes from Code in Angular, Navigating between components using routes from code First, you will check the condition, and depending on that condition, you After successfully configuring app-routing.module.ts , it will look as follows. These methods will call the navigate() method of the Router class to navigate to another view. In this Angular 8/9 tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material 8. Now, we have to display the 4 different API calls responses to the Angular 8 page using Angular 8 Material. redirect to redirect the page from one to another page & previously it was working fine.


Redirecting the Router to Another Route, Since pathMatch: full is provided, the router will redirect to component-one if the entire URL matches the empty path (''). When starting the application, it will now� If you are working with Angular and need to refresh a component without navigation on another component without using window.location.reload() or location.reload(), you can use the following code


Router Guards • Angular, With guards we can add checks to restrict access to a user to certain pages on our site. be adding it to the canActivateChild property and so on for the other guard types. If we want to redirect users to a login page we may inject Router into the Copy import { NgModule, Component, Injectable } from "@angular/core ";� Hi I am implementing a project in angular . and i am using the version ng-version="4.3.0" Here i am redirecting the app to another component doesnt invoking the oninit method Here is my sample code `fblogin() { const provider = 'facebook


This order will provoke in a discourse box to validate the 192.168.1.1 10.0.0.0.1 router is extremely direct, and for most clients, this guide just stays helpful until the previously mentioned half.