Pass data from one component to another in angular 6

Question

I'm new to angular i tried to send some formdata from one component to another by using service but it faces some issue ie , it shows error message as

error TS2339: Property 'subscribe' does not exist on type '(data: any) => void'.

This is the component that i had my data

    import { Component, OnInit } from '@angular/core';
import { JarwisService } from '../../Services/jarwis.service';
import { DataTransferService } from '../../dt-broker/dt-core/services/data-transfer.service';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { environment } from 'environments/environment';
import { NgForm } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-addlist',
  templateUrl: './addlist.component.html',
  styleUrls: ['./addlist.component.css']
})
export class AddlistComponent implements OnInit {

   constructor(private Jarwis:JarwisService,
               private dataTrans: DataTransferService,
               private router : Router,
               private http: HttpClient,
               private  _router : Router,
               private activatedRoute: ActivatedRoute) { }


  preview(form: NgForm){
    this.Jarwis.getpreviewcontent(form.value).subscribe(
      viewdata => this.handlepreviewResponse(viewdata)
    );
  }
  handlepreviewResponse(data){
    this.dataTrans.setpreviewdata(data);
    this.router.navigate(['/previewad']);
  }

}

This is the component that i want to send the data

import { Component, OnInit } from '@angular/core';
import { DataTransferService } from '../../../dt-broker/dt-core/services/data-transfer.service';
@Component({
  selector: 'ngx-previewad',
  templateUrl: './previewad.component.html',
  styleUrls: ['./previewad.component.scss']
})
export class PreviewadComponent implements OnInit {

  constructor(private dataTrans: DataTransferService) { }

  public result=null;
  ngOnInit() {
    // console.log(this.dataTrans.setpreviewdata);
    //alert(this.result);
   this.dataTrans.setpreviewdata.subscribe(message => this.result = message);
  }

}

This s the service that i wrote to transfer the data

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

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {


  private previewdata = new BehaviorSubject('no data');
  datapreview = this.previewdata.asObservable();

  constructor() { }


  setpreviewdata(data){
    return this.previewdata.next(data);
    //console.log(this.datapreview);
  }
}

Any help is appreciable.

you are getting a error on this line this.dataTrans.setpreviewdata.subscribe(message => this.result = message);? — Yash Rami, Mar 30 '19 at 04:02
and can you declare dataTrans public instead of private and try again ? — Yash Rami, Mar 30 '19 at 04:04
got yaa you declare private previewdata = new BehaviorSubject('no data'); as private change to the public — Yash Rami, Mar 30 '19 at 04:05
it still shows like this " Property 'subscribe' does not exist on type '(data: any) => BehaviorSubject'. " — sooraj s pillai, Mar 30 '19 at 04:15
i just update my answer can you please check let me know if it is working or not — Yash Rami, Mar 30 '19 at 04:22
Possible duplicate of [Angular 4 - Pass an object from one component to another (no parent - child hierarchy)](https://stackoverflow.com/questions/47471726/angular-4-pass-an-object-from-one-component-to-another-no-parent-child-hier) — Bhagwat Tupe, Mar 30 '19 at 06:41

Yash Rami · Answer 1 · 2019-03-30T04:21:42.307

you are declaring a BehaviorSubject private instead of public.

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

  @Injectable({
    providedIn: 'root'
  })
  export class DataTransferService {


  public previewdata = new BehaviorSubject('no data');
  datapreview = this.previewdata.asObservable();

  constructor() { }


  setpreviewdata(data){
      this.previewdata.next(data);
      //console.log(this.datapreview);
    }

  getpreviewMessage(): Observable<any> {
      return this.previewdata.asObservable();
  }
 }

component you want to get the data

   import { Component, OnInit } from '@angular/core';
   import { DataTransferService } from '../../../dt-broker/dt- 
     core/services/data-transfer.service';
   @Component({
      selector: 'ngx-previewad',
      templateUrl: './previewad.component.html',
      styleUrls: ['./previewad.component.scss']
   })
   export class PreviewadComponent implements OnInit {

   constructor(private dataTrans: DataTransferService) { }

   public result=null;
   ngOnInit() {
    // console.log(this.dataTrans.setpreviewdata);
    //alert(this.result);
    this.dataTrans.getpreviewMessage.subscribe(message => this.result = 
    message);
    }
   }

score 0 · Answer 2 · answered Mar 30 '19 at 05:00

I can notice multiple mistakes here.

First thing to note is BehaviorSubject.next is void function. That's why you are getting this error and you are subscribing to value set not for the change.

So far as I understand you don't need BehaviorSubject here. Use EventEmitter instead.

Your service will be shape as follows.

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

@Injectable({
  providedIn: 'root'
})
export class DataTransferService {
  public previewdata = new EventEmitter();
}

Send your data as follows

----- bunch of code ----
export class AddlistComponent implements OnInit {

   constructor(private Jarwis:JarwisService,
               private dataTrans: DataTransferService,
               private router : Router,
               private http: HttpClient,
               private  _router : Router,
               private activatedRoute: ActivatedRoute) { }


  preview(form: NgForm){
    this.Jarwis.getpreviewcontent(form.value).subscribe(
      viewdata => this.handlepreviewResponse(viewdata)
    );
  }
  handlepreviewResponse(data){
    this.dataTrans.previewdata.emit(data);
    this.router.navigate(['/previewad']);
  }

}

Receive data using subscription as below.

--- bunch of code ---
export class PreviewadComponent implements OnInit {

  constructor(private dataTrans: DataTransferService) { }

  public result=null;
  ngOnInit() {
   this.dataTrans.previewdata.subscribe(message => this.result = message);
  }

}

Enjoy!

score 0 · Answer 3 · answered Mar 30 '19 at 05:34

0

finally i found my answer . It was my fault i called wrong function from service in the view component

export class PreviewadComponent implements OnInit {

  constructor(public dataTrans: DataTransferService) { }

  public result=null;
   ngOnInit() {
    this.dataTrans.datapreview.subscribe(message => this.result = message);
    // console.log(this.result);
    }

}

answered Mar 30 '19 at 05:34

sooraj s pillai

866
2
17
39

There's a [small post](https://stackoverflow.com/a/71098922/1042705) here to help get through services.. in these scenarios – Irf Feb 18 '22 at 13:35

Pass data from one component to another in angular 6

3 Answers3

Linked