Unable to redirect to destination page after clicking login button

Question

I'm creating a login page using Angular ...but I can't access the destination page after entering the login details. Given below is the code snippet of login.component.html file

<form *ngSwitchCase="'Login'">
       <h3>Login</h3>  
       <label>Email:</label>
       <br>
       <input type="text" name="email" [(ngModel)]='email'>
       <br>
       <label>Password:</label>
       <br>
       <input type="password" name="pswd" [(ngModel)]="pswd">
       <br>
       <div class="foo">
       <input class="btn btn-primary" type="button" value="Login" click="onClick()" >
       <input class="btn btn-danger" type="button" value="Cancel" >
       </div>
       <button type="button" class="btn btn-info"(click)="swap()" >Not yet Registered?(Sign Up).</button>

and below is the code snippet of the component.ts file

import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 constructor(private router:Router) { }
ngOnInit(): void {
  }

  public val='Sign Up';
  email:string;
  pswd:string;

  swap()
  {
    if(this.val=='Sign Up')
    {
      this.val='Login';
    }
    else
    {
      this.val='Sign Up';
    }
  }

onClick():any{
  if(this.email=="sheldonCooper@yale.edu" && this.pswd=="theSkinnyWeirdo")
  {
    this.router.navigateByUrl('/list');
  }
  else
  {
    window.alert("Incorrect Email or Password!");

  }
}
}````
Also the url doesn't change when I click the login button.
Please provide a quick fix for this.

You should navigate to a url path in your router. You're trying to navigate to the filesystem path of the component (`this.router.navigateByUrl('./login/login.component');` this is incorrect. — Jason White, May 22 '20 at 19:07
I am not sure if you've setup routing in your module. Please refer here for routing between components: https://stackoverflow.com/q/44864303/6513921 and https://angular.io/guide/router#defining-a-basic-route — ruth, May 22 '20 at 19:10
Yes I have setup routing and I've modified the url as well...but it doesn't work. — User 1426833, May 23 '20 at 12:51

Aakash Garg · Accepted Answer · 2020-05-23T13:02:45.107

1

Please find solution below :-

https://stackblitz.com/edit/github-cnxaux

edited May 23 '20 at 13:02

answered May 22 '20 at 21:35

Aakash Garg

10,649
2
7
25

can you give a stackblitz? – Aakash Garg May 23 '20 at 07:10
why on login you again want to go to login component? – Aakash Garg May 23 '20 at 12:57
what is your destination page? – Aakash Garg May 23 '20 at 12:59
1

updated solution url above. please vote if it works. – Aakash Garg May 23 '20 at 13:03

Unable to redirect to destination page after clicking login button

1 Answers1