Transferring data between unrelated components

I am facing an issue where I am unable to pass a value from the Tabs component to the Task component. To address this, I have created a separate data service. The value in the Tabs component is obtained as a parameter from another component. However, when trying to pass this value from Tabs to the Task component, it returns 'undefined' on the Task Page.

Below is my Service class

import { Injectable} from '@angular/core';  

@Injectable()
export class DataService {

   list:any;

   getUserData(){ 
      return this.list; 
   } 
   setUserData(data:any){
       this.list = data;
   }
}

Tabs Component

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { SettingsPage } from '../settings/settings';
import { TasksPage } from '../tasks/tasks';
import { DataService } from "../../services/data.service";

@Component({
  templateUrl: 'tabs.html',
  providers:[DataService]
})
export class TabsPage {

  tab1Root = TasksPage;
  tab2Root = SettingsPage;
  user:any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public dataService: DataService) {

  this.user = navParams.get('param1');    
  this.dataService.setUserData(this.user);
  }
}

Task Page

import { Component,ViewChild } from '@angular/core';
import { DataService } from "../../services/data.service";
import { TabsPage } from '../tabs/tabs';
import { TasksCreatePage } from '../tasks-create/tasks-create';

const logger = new Logger('Tasks');

@Component({
  selector: 'page-tasks',
  templateUrl: 'tasks.html',
  providers:[DataService]
})
export class TasksPage {
usern:any;

constructor(public dataService: DataService){
this.usern = this.dataService.getUserData();
console.log(this.usern);
}

Answer №1

It appears that the issue lies in the fact that navParams.get() operates asynchronously. Here's a revised version:

this.user = navParams.get('param1');
this.dataService.setUserData(this.user);

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

Generating dynamic rows and columns with Angular and Bootstrap in real time

I am looking to dynamically generate rows in an angular template, with each row containing 4 columns. For example, if the input is 40, the output should have 10 rows, each consisting of 4 columns. I am using bootstrap for my template layout. Below is what ...

Incorporating a Link/Template Column into Your Unique Table Design

I built a table component following the guidelines from this article: Creating an Angular2 Datatable from Scratch. While I have added features like sorting and paging to suit my app's needs, I am struggling with implementing a "Template column" to al ...

ERROR: Could not locate the 'ANDROID_HOME' environment variable

Solution: Eliminate platform using ionic platform rm android Modify permission with chmod 777 /path/to/update-notifier-cordova.json Add platform by using ionic platform add android The issue may be related to another project that was created, leading t ...

Angular 2: Simplifying the Process of Retrieving a Full Address Using Latitude and Longitude

Currently, I am utilizing the angular 2-google-maps plugin. Is there a way to retrieve the country and postal code based on latitude and longitude using Angular 2 Google Maps with Typescript? ...

Encountering a red squiggly line while working on an Angular 2 project in an HTML file within Visual Studio

Whenever I incorporate Angular 2 code into my HTML files, I notice red squiggly lines appearing like this: Hovering over the red squiggly lines does not reveal any errors or warnings. It may be worth mentioning that I am currently utilizing ReSharper Ult ...

Guide to creating numerous separate subscriptions in angular 6

Can you explain the differences between flatMap(), switchmap(), and pipe()? Which one would be most suitable for the given scenario? I need to call the next method once both responses are received. this.jobService.getEditableText('admins', compar ...

Guide to Angular Interface Styling - Ambiguous Suggestions

After reviewing the Angular style guide for interfaces, I find two recommendations particularly perplexing: The suggestion to use a class instead of an interface for services and declarables (components, directives, and pipes) leaves me puzzled. Similarl ...

The Ionic Capacitor "PushNotifications" plugin is currently not supported on Android devices

I'm encountering an issue while attempting to request permissions using the @capacitor/push-notifications plugin. I have carefully followed all the steps outlined in the README and am working with Ionic and Vue 3. Here is a snippet from my package.js ...

The test function is not recognized by Cordova when the device is ready

Within my app.component.ts file, I have the following code snippet: export class AppComponent implements OnInit { constructor(private auth: AuthService, private fireBaseService: FirebaseService, ) {} ngOnInit() { this.auth.run(); document.addE ...

Using a string array in a JSON model - a simple guide

Just starting out with Angular and having some difficulty integrating my JSON data effectively. Inside my service, I have temporary JSON data that is structured using a model to define the different types of information within it. My objective is to creat ...

Save the entire compiler output as a text or CSV file by using the "strict":true compiler option in TypeScript

The tsconfig.json file in my Visual Studio project includes the following settings: { "CompileOnSave":false, "CompilerOptions":{ "strict": true, "skipLibCheck":true }, "angularCompilerOptions":{ "fullT ...

Service in Angular 2 failing to push updates to component

I am currently working on a project where I need to retrieve data from MongoDB using a Service call. So far, the Service call is functioning correctly and logging the data in the console as expected. The challenge arises when dealing with a large response ...

Exploring Angular 2: Incorporating multiple HTML pages into a single component

I am currently learning Angular 2 and have a component called Register. Within this single component, I have five different HTML pages. Is it possible to have multiple templates per component in order to navigate between these pages? How can I implement ro ...

Tips for efficiently constructing a Docker container using nodejs and TypeScript

Struggling for the past couple of days to get the project running in production, but it keeps throwing different errors. The most recent one (hopefully the last!) is: > rimraf dist && tsc -p tsconfig.build.json tsc-watch/test/fixtures/failing.t ...

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 ...

Utilizing Angular to upload videos

I'm having an issue while attempting to upload a video using Angular and send it to a PHP backend server. Currently, I am working with Angular 6 and have utilized ng2-file-upload. While this method works well for images, when I attempt to send a vide ...

experimenting with the checked attribute on a radio button with jasmine testing

Currently using Angular 8 with Jasmine testing. I have a simple loop of radio buttons and want to test a function that sets the checked attribute on the (x)th radio button within the loop based on this.startingCarType. I am encountering false and null tes ...

Exploring the concept of 'Abstract classes' within the Svelte framework

As someone who is relatively new to Svelte and frontend development (with primary experience in Rust/C++/Python), I hope you can forgive me for asking what might seem like a basic question. My goal is to showcase different kinds of time-indexed data, with ...

Managing dates in my Angular 2 application using Typescript

Currently, I am in the process of generating test data for my views before initiating API calls to the API application. Within a service in my Angular 2 application, I have defined an interface as follows: export interface amendmentBookings { booking ...

Receiving an error when attempting to inject the Router in a component constructor without using the elvis operator

Upon launching my app, I desire the route /home to be automatically displayed. Unfortunately, the Angular 2 version I am utilizing does not support the "useAsDefault: true" property in route definitions. To address this issue, I considered implementing th ...