The Angular router is causing an issue where when navigating back, my component does not reset to 0 as expected, resulting in

I'm currently working on an ionic-angular app and implementing a Register feature where users input their information step by step. The issue I'm facing is with the backward navigation functionality - when users go back using the arrow button, the previously visited step component doesn't function as expected. It appears the data declared in the ts file properties gets lost, leading to malfunctioning.

My intuition suggests that it's a component lifecycle problem because it might not be resetting properly due to being the most recently opened component.

Here's the code snippet for the back button function:

goBackInNavegation() {
this.router.navigate(['../step2'], { relativeTo: this.activatedRoute, state: {activity: this.activity}});  }

Please disregard the "activity" state object passed along.

Can someone guide me on how to reset the component being navigated to if the previous navigation was from the same step? Any assistance would be greatly appreciated. Thank you :)

angulartypescriptionic-framework

Answer №1

Have you attempted to start the component during ngOnInit()?

If you return, that function will not be executed. To initialize data each time you enter, you must do it within ionViewWillEnter.

Take a look at this

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

Is MongoDB still displaying results when the filter is set to false?

I am currently trying to retrieve data using specific filters. The condition is that if the timestamp falls between 08:00:00 and 16:00:00 for a particular date, it should return results. The filter for $gte than 16:00:00 is working correctly, but the $lte ...

typescriptmongodbfilter

How can I retrieve information from SafeSubscriber?

I need to develop an Angular application that fetches data from the backend and displays it on the front end, along with some predefined hard-coded data. The communication in my project happens between two files: client.service.ts import { Injectable } f ...

jsonangulartypescriptsubscriber

The file is missing the required fields in the Firestore document

I've been facing a challenge while attempting to update specific fields within a firebase document. Even though the cloud function triggers and performs an upload on the document, the values of the fields I am trying to update never seem to get upload ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functionsdocument

Create a new function within the GraphQL Resolvers file

I am trying to define a function within the same ts file as where I specify the resolvers export const resolvers = { Query: { books: () => { return [ { title: 'Harry Potter and the Chambe ...

javascriptnode.jstypescriptgraphql

Error handling in Angular is not properly managing the custom exception being thrown

I am currently working on an Angular 12 application and I have a requirement to implement a custom ErrorHandler for handling errors globally. When I receive an error notification from the backend, I subscribe to it in the ToolService using this.notificati ...

javascriptangulartypescript

Extending Two Classes in Typescript: A Complete Guide

I am looking for a way to efficiently save time by reusing common code across classes that extend PIXI classes within a 2D WebGL renderer library. Object Interfaces: module Game.Core { export interface IObject {} export interface IManagedObject e ...

javascriptooptypescriptextends

Develop a query builder in TypeORM where the source table (FROM) is a join table

I am currently working on translating this SQL query into TypeORM using the QueryBuilder: SELECT user_places.user_id, place.mpath FROM public.user_root_places_place user_places INNER JOIN public.place place ON place.id = user_places.place_id The ...

sqltypescriptpostgresqltypeorm

Tips for properly formatting dates using Moment.js

Is there a way to personalize the date format using Moment.js? I specifically want to display something like Thu 10 for the day of the month. Any suggestions on how to achieve this with moment or pipes would be greatly appreciated. app.component.html < ...

angularpipemomentjs

Vue 3 - Child Component Script Not Updating with Reactive Prop Changes

I am facing an issue where I am trying to pass a reactive data as a prop to a child component in Vue 3. The data updates correctly in the child component's template, but it does not reflect in the child component's script. In the parent component ...

javascripttypescriptvue.jsvuejs3

Creating a dynamic multi-series line chart in D3 version 4 that incorporates data points with matching colors to their respective lines

In my attempt to enhance a multi-series line chart with D3 V4 in Angular-cli, I have encountered a challenge. Below is the code snippet of what I have been working on. var lookBookData = z.domain().map(function (name) { return { name: name, ...

javascriptd3.jsangularangular-cli

Security concern regarding XSRF in Spring and Angular 5

For my current project, I am using Spring as the backend (generated with microservices with Jhipster) and Angular5 as the frontend. On the server side, CSRF security is added (it was enabled by default when we created microservices with Jhipster). Workin ...

springangular

Selecting multiple items using PrimeNG's AutoComplete with preselected values

https://i.sstatic.net/Yju8E.png Is there a method for displaying preselected values in PrimeNg AutoComplete Multiple mode? I attempted to include <p-autoComplete value="myValue"></p-autoComplete>, but it had no effect. ...

angularautocompletedefault-valueprimeng

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

htmlcssangularbackgroundbackground-image

Using CSS to create hover effects for specific classes of elements

Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but ...

htmlcssangular

Using RouterModule.forRoot() in Angular 2 CLI compiler/ngc command: A step-by-step guide

Assume I have the appRoutingModule shown below: export const routes: Route[] = [ { path: '', component: ApplicationlistComponent } ]; @NgModule( { imports: [ ApplicationsModule, RouterModule.forRoot( routes ) ], exports: [ Route ...

angularangular2-routingangular2-compiler

Unable to discontinue receiving notifications from ActionsSubject in ngrx/store

I am using ngrx/store to handle login actions by subscribing to a store. The login component is displayed as a modal, and if I enter an incorrect password, the data received is data.type === 'LOGIN_FAILED'. However, even after closing and reopeni ...

angularrxjsngrx

Utilizing statuses in Typescript React for conditional rendering instead of manually checking each individual variable

It's common for developers, myself included, to perform conditional rendering by checking variable values like this: import React, { useState, useMemo } from 'react' const Page = () => { const [data, setData] = useState<any[]>() ...

reactjstypescript

Transporting a Typescript file to the customer using JavaScript

As a newcomer to typescript and in the process of creating a small application in visual studio 2013, I have noticed that when viewing the project in Chrome's developer tools, typescript files (*.ts) are being downloaded to the client. This could pote ...

typescript

"Error: Import statement must be used within a module" encountered in TypeScript (with nodemon) and Node.js (running in Docker)

Within the server directory of my web application written in TypeScript, there is a nodemon command used to automatically restart the code after changes are made. The command looks like this: nodemon dist/index.js However, upon running it, an error is enc ...

node.jstypescriptdockernodemon

The Angular 4 HTTP patch method is encountering difficulties when called in code but functions properly when tested using Post

My attempts to make a patch and post call to the server are failing as it never reaches the server. Interestingly, the same request works flawlessly in Postman, so I suspect there might be an issue with my code. Both my post and patch methods are essentia ...

angularhttptypescript