Sharing parameters between pages in Angular IonicPassing parameters between pages within an Angular Ionic application

Is there a way to pass parameters from the signup page to the signupotp page successfully? I am facing an issue where the OTP on the signupotp page is not being recognized because the parameters (email and mobile) are not getting passed properly. In my backend code, for OTP verification, the params (mobile, email, otp) need to be verified but it's not working as expected. I have tried initializing the data in the signup page and passing it to the signupotp page, but it didn't work. Any suggestions on how to resolve this issue?

SIGNUP.PAGE.TS

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { SignupotpPage } from '../signupotp/signupotp.page';

@Component({
selector: 'app-signup',
templateUrl: './signup.page.html',
styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {

Mobile: any;
Email: any;
data: any;
otp: any;
checked: any;

constructor(private api: ApiService, private router: Router, public signupotp: SignupotpPage) {}

ngOnInit() {
}

Continue(Mobile, Email){
const user = {
Mobile: Mobile,
Email: Email
}
console.log(Mobile);
console.log(Email);

this.api.SignupUser(user).subscribe(data =>{
console.log(data);
this.signupotp.initialisedata(Mobile, Email);
this.router.navigate(['signupotp']);

});
}
}

SIGNUPOTP.PAGE.TS

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-signupotp',
templateUrl: './signupotp.page.html',
styleUrls: ['./signupotp.page.scss'],
})
export class SignupotpPage implements OnInit {

Mobile: any;
Email: any;
otp: any;
data: any;

constructor(private api: ApiService, private router: Router) {}


initialisedata(email, mobile)
{
console.log("HUUUU");
console.log(email, mobile);
this.Email = email;
this.Mobile = mobile; 
}

ngOnInit() {
}

Confirm(otp){
const user = {
otp: otp,
mobile: this.Mobile,
email: this.Email
}
console.log(otp); 
console.log("hey, how are you")


this.api.Verifysignupotp(user).subscribe(data =>{
console.log(data);
this.data =  data;
if(this.data.Msg)
{
alert(this.data.Msg);
}
else
{
this.router.navigate(['/']);
}

});
}
}

Service.ts

SignupUser(user): Observable<Object>{
console.log(user);
console.log('getting the signup data from the user');
return this.http.post<Object>(`${this.base_url}/signup`, user);
}

Verifysignupotp(user): Observable<Object>{
    console.log(user);
    console.log('getting all listings from the server');
    return this.http.post<Object>(`${this.base_url}/verifysignupotp`, user);
}

Answer №1

If you're using Angular, there are methods available to pass parameters through the URL of a route. For example, you can use

this.router.navigate['path', param]
. To set this up in your app-routing.module.ts file, you would define routes like this:

export const routes: Routes = [
  { path: 'path/:param', component: yourComponent }
];

Alternatively, you could store the parameters in variables within your signup Service and access them as needed throughout your application.

In this scenario, it might be beneficial to create an object named user in your service.ts file. Upon receiving data in your signup Component or Page, you can populate the user Object within your service.ts. Then, when navigating to your signupotp Page or Component, you can retrieve the data from the service and potentially augment the object with additional information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to integrate my information into the user interface using Angular

import { Component, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; import { Batch } from '../../../config/batchnew/batch.model'; import { BatchService } from '../../../config/batchnew ...

Unusual behavior when importing in Angular 2 using TypeScript

While working on a demo for another question on Stack Overflow, I initially used angular-cli and then switched to Plunker. I noticed a peculiar difference in behavior with the import statement between the two setups. The issue arises with the second impo ...

I'm having trouble grasping the concept of 'globals' in TypeScript/NodeJS and distinguishing their differences. Can someone explain it to me?

As I review this code snippet: import { MongoMemoryServer } from "mongodb-memory-server"; import mongoose from "mongoose"; import request from "supertest"; import { app } from "../app"; declare global { function s ...

AngularFire 2 dispatching email for password reset

I am looking to add a feature for resetting passwords or handling forgotten passwords using AngularFire2. It looks like the function sendPasswordResetEmail is either not available in AngularFire2 or the typings have not been updated yet. I tried accessing ...

What causes Enum[Enum.member] to be undefined in the TypeScript playground on codepen.io?

My intention was to test out some type settings on TypeScript playground at codepen.io, but I encountered an unexpected issue: enum Order { Asc = 'asc', Desc = 'desc' } console.log(Order[Order.Asc]); // undefined in codepen.io ...

When I bring in a component from my personal library, it will assign the type "any" to it

I'm facing an issue when trying to import a component from my own library. The component within the library is actually sourced from another one (so I import the component, customize it, and then export the customized version). However, upon importi ...

class-validator: ensures the correct number of digits are present in numeric values

Seeking assistance on validating the number of digits for numeric values using class-validator. Specifically, I want my entity to only accept numbers with 6 digits for a certain property. For example: const user1 = new User(); user1.code = 123456 // should ...

Loading external templates in Angular2 with Webpack2

Attempting to integrate ngtemplate-loader in a project using AngularJs 2 and Webpack 2 is proving challenging. While this setup has been successful in Angular 1.x projects with Webpack 1.x, it encounters an error when running in the browser: Uncaught Type ...

Error encountered during Typescript compilation: Type 'void' cannot be assigned to type 'Item[]'

Below are my typescript functions. When I edit in vscode, the second function does not show any error message. However, upon compilation, an error is displayed for the second function: error TS2322: Type 'Promise<void>' is not assignable t ...

Check the status of a different website's online presence using JavaScript

Hey there! I'm working with Angular and iframes, and I want to determine whether the target website is online before loading it into the iframe. Here's the code I am currently using: try { await this._httpClient.get(url, { observe: 'respo ...

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...

How can I display the values stored in an array of objects in Angular 2

I need help printing out the value of id from an array that is structured like this: locations = [ {id: '1', lat: 51.5239935252832, lng: 5.137663903579778, content: 'Kids Jungalow (5p)'}, {id: '2', lat: 51.523 ...

Using a snippet of HTML code from one Angular component in another component

Is it possible to use a specific div element from one Angular component in another component? main component.html <html> <div1> some elements </div1> <div2> some elements </div2> In the child ...

What is the process for inputting a predefined function into an interface?

In my project, I have a Locale interface that defines the properties of a locale for my component: interface Locale { src: string; alt: string; language: string; i18nFormat: string; } During debugging, I am using the built-in .toSource() function ...

Utilizing objects as values with `react-hook-form`

About the Issue I'm facing an issue with a component that utilizes an object as its value. My goal is to integrate this component with react-hook-form The challenge arises when react-hook-form considers my object as a nested form control Background ...

Template literal types in TypeScript and Visual Studio Code: An unbeatable duo

I'm encountering an issue while attempting to utilize literal types in Visual Studio Code. When following the example from the documentation, https://i.stack.imgur.com/V6njl.png eslint is flagging an error in the code (Parsing error: Type expected.e ...

I'm encountering an issue with one of my routes not loading correctly in Angular 4 Universal

I have been working on implementing Universal and I believe I've made significant progress. My project is built on this seed. However, when I run "npm start", only the /about and /contact pages render successfully. The /home page does not render at al ...

Here is a guide on showcasing information obtained from ASP.NET API in Angular version 13

My goal is to fetch motorcycle data from a web API and showcase it in my Angular project. ASP.NET Framework Web API 4.7 Angular CLI: 13.3.7 Angular: 13.3.11 On the Web API end: Controller: [EnableCors(origins: "*", headers: "*", ...

Improving the clarity of Jest snapshot test logs using styled from MUI

Currently, I am working with MUI v5 along with styled components and Jest snapshot testing. I am looking for a way to improve the logs generated when a snapshot test fails. Below is an example of the component I am dealing with: const styledProperties = n ...

Troubleshooting issue with absolute paths in Vite project using React and TypeScript

I'm having trouble implementing absolute paths in a Vite react-ts project. This is how I set up the project: npm init @vitejs/app npx: installed 6 in 1.883s √ Project name: ... test-vite √ Select a framework: » react √ Select a variant: » rea ...