Guide on navigating to a different page using a function with router link in Angular using TypeScript

Question

Guide on navigating to a different page using a function with router link in Angular using TypeScript

Trying my hand at Angualar and Typescript for the first time. I am working on creating a login page where users can move to another page if their credentials are correct. To achieve this, I want to use a function that is triggered by clicking a button. However, my current implementation doesn't seem to be working as expected.

Here is a snippet of my code:

<button type="submit" id="btnLog" (click)="log(userName.value , password.value )" routerLink="/home" >

In app.component.ts file:

log(uName , uPass) {
   //Validation Part

    if((name==uName) && (pass==uPass)){
      attrInvalid.innerHTML="routerLink=/\"home\""
    }else{
      attrInvalid.innerHTML="Invalid UserName or Password"
    }
  }

angular typescript

Answer 1

Answer №1

Utilize the router.navigate method to move to a specific route upon successful validation. It is recommended to avoid direct DOM manipulation (such as using innerText) when working with Angular.

To begin, inject an instance of the Router class in the constructor of your component class like so:

error:Boolean = false;
constructor(private router: Router) { }

Then, within your log method, make use of it:

log(uName , uPass) {
   //Validation Part

    if((name==uName) && (pass==uPass)){
      this.router.navigate['/home'];
    }else{
      //handle the error to show the error message using *ngIf
       this.error = true;
    }
  }

Additionally, remember to adjust the button HTML:

<button type="submit" id="btnLog" (click)="log(userName.value , password.value )" >
<span *ngIf="error" id="attrInvalid">Login failed</span>

Answer 2

Utilize the router.navigate method to move to a specific route upon successful validation. It is recommended to avoid direct DOM manipulation (such as using innerText) when working with Angular.

To begin, inject an instance of the Router class in the constructor of your component class like so:

error:Boolean = false;
constructor(private router: Router) { }

Then, within your log method, make use of it:

log(uName , uPass) {
   //Validation Part

    if((name==uName) && (pass==uPass)){
      this.router.navigate['/home'];
    }else{
      //handle the error to show the error message using *ngIf
       this.error = true;
    }
  }

Additionally, remember to adjust the button HTML:

<button type="submit" id="btnLog" (click)="log(userName.value , password.value )" >
<span *ngIf="error" id="attrInvalid">Login failed</span>

Answer 3

Answer №2

The response provided above is nearly correct but may not be entirely accurate for Angular version 14.02.

A cleaner approach would be to utilize the router object directly in order to eliminate the need for a separate variable:

<button type="submit" id="btnLog" (click)="log(userName.value , password.value )" >

In the .ts file, it is essential to import and inject the router before setting up the desired route:

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

[...]

  constructor(private router: Router) { }

  log(uName , uPass) {
    //Validation Part

    if((name==uName) && (pass==uPass)){
      this.router.navigate(['/home']);
    }else{
      alert("Invalid UserName or Password");
    }
  }

Answer 4

The response provided above is nearly correct but may not be entirely accurate for Angular version 14.02.

A cleaner approach would be to utilize the router object directly in order to eliminate the need for a separate variable:

<button type="submit" id="btnLog" (click)="log(userName.value , password.value )" >

In the .ts file, it is essential to import and inject the router before setting up the desired route:

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

[...]

  constructor(private router: Router) { }

  log(uName , uPass) {
    //Validation Part

    if((name==uName) && (pass==uPass)){
      this.router.navigate(['/home']);
    }else{
      alert("Invalid UserName or Password");
    }
  }

Guide on navigating to a different page using a function with router link in Angular using TypeScript

Answer №1

Answer №2

Similar questions

Exploring ways to test the ng-web-apis/geolocation Observable within an Angular 8 environment

Error encountered during conversion to Typescript for select event and default value

What is the process for setting up a Quill Editor within an Angular 2 Component?

The InAppPurchase Plugin in Cordova is throwing the error message "Encountered an error: Cannot access the 'getProducts' property as it is undefined."

Update the form field with today's date in a JHipster application

Angular 2 TypeScript: How to effectively sort an array

Is OnPush Change Detection failing to detect state changes?

Passing an array of items as a property to a child component in React with Typescript is not possible

activate the change detection for a specific subcomponent

Improve the efficiency of importing Bootstrap SCSS files

Troubleshooting challenges with setting up Nginx Reverse Proxy, ExpressJS, Angular, and SSL configurations

Error: Model function not defined as a constructor in TypeScript, mongoose, and express

Encountered a PrismaClientValidationError in NextJS 13 when making a request

Ideal method of re-entering ngZone following an EventEmitter event

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

The unspecified value of a dynamically generated button

Error: 'ngForOf' is not recognized as a valid property of the 'tr' element

Ways to enlarge image size without compromising the image resolution?

Issue: Angular is indicating that the 'feedbackFormDirective' member is implicitly assigned with type 'any'

Using Typescript to extract/calculate types with limitations without the need to explicitly extend or broaden them