-2

I am trying to get the query parameter from the URL in to a component and it works as expected and now I want to get the data from this component in to another. But I am getting undefined.

Component where I am trying to get the query parameter:

export class ProjectShipmentComponent implements OnInit {
  public repProjectNumber : string;

  constructor( private activatedRoute: ActivatedRoute) { }

   ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.repProjectNumber = params['reportProject'];
      console.log(this.repProjectNumber);
    })}
  getPrjNum()
  {
    return this.repProjectNumber;
  }}

Now I am trying to retrieve this repProjectNumber in to another component like below 

    import { ProjectShipmentComponent } from '../project-shipment.component';
    export class ReportingFilterComponent implements OnInit {
    repPrj : string;
    constructor(private psc :ProjectShipmentComponent ) {
       this.repPrj = this.psc.getPrjNum();
      console.log(this.repPrj);

I get undefined here. Is there any order in which the ngOnInit is executed? Because while debugging I didn't see ngOnInit executed when the getPrjNum function call is made from ReportingFilterComponent. How can I get this working?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
trx
  • 2,077
  • 9
  • 48
  • 97
  • 1
    Use an observable for `repProjectNumber`. – Reactgular Aug 21 '19 at 12:46
  • Read [this](https://angular.io/guide/component-interaction) and you will find what you are seeking. – leopal Aug 21 '19 at 12:47
  • You can use : ViewChild Directive, you can use a service with an observable where you put the data and retrieve it in a component, you can use Input directives. There are many way of doing it, it depends of your structure and your needs – Nico Aug 21 '19 at 12:48

1 Answers1

0

Passing data between components doesn't work like this because every time you create instance of Component, it's data is re initiated. Try using a service. Example:

First Component:

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

Second Component:

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

Service:

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Example from https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Yash
  • 3,438
  • 2
  • 17
  • 33