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

Looking to extract the expiration date from an x509 certificate?

I am currently engaged in a project that involves retrieving and displaying certificate information from an Azure integration account using Angular/Typescript. One of the requirements is to show the decoded public certificate to users to extract important ...

What is the connection between @types, TypeScript, and Webpack?

When using an exported type in a .ts file, it is necessary to import it: import {jQuery} from 'jQuery' Even after adding the import, intellisense may not work until npm install @types\jQuery is executed. If @types are installed, intellis ...

Issue with applying the React Material UI ThemeProvider

I'm having issues with applying styles using @material-ui/core in my React app. Some of the styles are not being applied properly. You can check out my sandbox for the full code (relevant snippets below). Although I followed the instructions from Ma ...

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

Typescript library available as a private npm dependency

I have developed a Typescript library that I bundle as an npm module. During the development of my frontend application, I easily integrated this library using yarn link. As I set up GitLab CI for other developers to work on the frontend application, I am ...

Looking for an IOS yearly calendar solution for Angular6? Look no further than the angular-calendar-year-view library available at [https://github.com/MariemChaab

Seeking an angular yearly calendar for iOS similar to the one found at [https://github.com/MariemChaabeni/angular-calendar-year-view], designed for use with Angular 7. However, when attempting to integrate it into Angular 6, I encountered error ts1005; e ...

Altering the parent component's output depending on a boolean value established in the child component within Angular

Recently I began learning Angular and find myself in need of some assistance when it comes to managing a specific situation with Angular 16. In our project, we have two different versions of the site header represented by two components - one as the defaul ...

Utilizing shared state in React components through props

Currently, I am utilizing a shared global state in the following manner: interface DashboardProps extends React.Props<Dashboard> { globalState? : GlobalState } export class Dashboard extends React.Component<DashboardProps, any>{ } Withi ...

Access your Angular 2 application on an external device during the development process

Is there a way to view your app in an external device like a cell phone web browser, instead of just running npm start and viewing it in your desktop browser? ...

`Achieving efficient keyboard navigation with MUI Autocomplete and SimpleBar integration in React``

Currently, I am attempting to integrate the Simplebar scrollbar into the MUI Material Autocomplete component in place of the default browser scrollbar. While everything is functioning correctly, this customization has caused me to lose the ability to use t ...

Is a custom test required for PartiallyRequired<SomeType>?

Is there a way to create a function that validates specific fields as required on a particular type? The IFinancingModel includes the property statusDetails, which could potentially be undefined in a valid financing scenario, making the use of Required< ...

Troubleshooting problem with Angular Click Outside Directive and unexpected extra click event issue

The challenge I'm facing involves implementing a custom Click Outside Directive for closing modal dialogs, notifications, popovers, and other 'popups' triggered by various actions. One specific issue is that when using the directive with pop ...

Utilizing TypeScript with React to dynamically select which component to render

My task seemed simple at first: to render a React component based on its name/type. Here is an example of how it is used: // WidgetsContainer.ts // components have a difference in props shape! const componentsData = [ { type: 'WIDGET_1', ...

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Currently, I am developing a project in PHP and utilizing Typescript. I aim to follow a monorepo pattern similar to what NX offers. However, I am facing challenges when attempting to compile typescript for each of my apps. Here is the current structure of ...

Convert the Angular PrimeNG class into a TreeNode object to avoid the error of trying to access the map property of an

Currently, I am working on a project that was created with JHipster and utilizes Angular 4.3. I want to incorporate the tree component from PrimeNG into this application. My aim is to transform an array of objects into an array of TreeNodes so that it can ...

How to toggle a checkbox in Angular 5

My terms of service modal is using ngBootstrap and I want the action that closes the modal to be determined by whether the checkbox is checked or not. Here is the HTML code: <ng-template #content let-c="close" let-d="dismiss"> <div class="modal ...

Creating a structured state declaration in NGXS for optimal organization

Currently, I'm delving into the world of NGXS alongside the Emitters plugin within Angular, and I find myself struggling to grasp how to organize my state files effectively. So far, I've managed to define a basic .state file in the following man ...

ridiculing callback within parameter

I have a model setup in the following way: export class MyClass { grpcClient: MyGRPCClient; constructor(config: MyGRPCClientConfig) { this.grpcClient = new MyGRPCClient( config.serverUrl, grpc.credentials.createInsecure(), ); ...

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Having some trouble setting up a web app with TypeScript and jspm & system.js for module loading. Progress is slow. After installing jspm and adding jQuery: jspm install jquery And the initial setup: <script src="jspm_packages/system.js"></scri ...

Leveraging async-await for carrying out a task following the deletion of a collection from a mongodb database

Trying to implement async await for executing an http request prior to running other code. Specifically, wanting to delete a collection in the mongodb database before proceeding with additional tasks. This is what has been attempted: app.component.ts: ...