1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Angular 4 pass data between 2 not related components

Discussion in 'Programming/Internet' started by User.Anonymous, Sep 12, 2018.

  1. I have a questions about passing data in Angular.

    First, I don't have a structure as <parent><child [data]=parent.data></child></parent>

    My structure is


    So, in I have a select that do send value to and .

    OnSelect method is well fired with (change) inside component.

    So, I tried with @Input, @Output and @EventEmitter directives, but I don't see how retrieve the event as @Input of the component, unless to go on parent/child pattern. All examples I've founded has a relation between component.

    EDIT : Example with BehaviorSubject not working (all connected service to API works well, only observable is fired at start but not when select has value changed)

    shared service = company.service.ts (used to retrieve company data)

    import { Injectable } from '@angular/core';
    import { Headers, Http, Response } from '@angular/http';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';

    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/toPromise';

    export class SrvCompany {

    private accountsNumber = new BehaviorSubject<string[]>([]);
    currentAccountsNumber = this.accountsNumber.asObservable();

    changeMessage(accountsNumber: string[]) {

    private _companyUrl = 'api/tiers/';

    constructor(private http: Http) { }

    getSociete(): Promise<Response> {
    let url = this._companyUrl;
    return this.http.get(url).toPromise();

    invoice.component.ts (the "child")

    import { Component, OnInit, Input } from '@angular/core';
    import { Headers, Http, Response } from '@angular/http';

    import { SrvInvoice } from './invoice.service';
    import { SrvCompany } from '../company/company.service';

    selector: 'invoice',
    templateUrl: 'tsScripts/invoice/invoice.html',
    providers: [SrvInvoice, SrvCompany]

    export class InvoiceComponent implements OnInit {

    invoice: any;

    constructor(private srvInvoice: SrvInvoice, private srvCompany: SrvCompany)


    ngOnInit(): void {

    // Invoice data is linked to accounts number from company.
    this.srvCompany.currentAccountsNumber.subscribe(accountsNumber => {
    if (accountsNumber.length > 0) {
    this.srvInvoice.getInvoice(accountsNumber).then(data => this.invoice = data.json());

    //getInvoice(id: any) {
    // this.srvInvoice.getInvoice(id).then(data => this.invoice = data.json());

    company.component.ts (the trigerring "parent")

    import { Component, Inject, OnInit, Input } from '@angular/core';
    import { Headers, Http, Response } from '@angular/http';

    import { SrvCompany } from './company.service';

    selector: 'company',
    templateUrl: 'tsScripts/company/company.html',
    providers: [SrvCompany]

    export class CompanyComponent implements OnInit {

    societes: any[];
    soc: Response[]; // debug purpose
    selectedSociete: any;

    ville: any;
    ref: any;
    cp: any;
    accountNumber: any[];

    constructor(private srvSociete: SrvCompany)


    ngOnInit(): void {

    getSocietes(): void {

    .then(data => this.societes = data.json())
    .then(data => this.selectItem(this.societes[0].Id));

    selectItem(value: any) {
    this.selectedSociete = this.societes.filter((item: any) => item.Id === value)[0];
    this.cp = this.selectedSociete.CodePostal;
    this.ville = this.selectedSociete.Ville;
    this.ref = this.selectedSociete.Id;
    this.accountNumber = this.selectedSociete.Accounts;

    Login To add answer/comment

Share This Page