(Angular2/4) Sending data from one component to another using a service

Question

I'm starting out in Angular and I'm having issues with transferring my data. Basically, I'm trying to get the data from my form to another component. I would like to be able to access every single element (e.g data.name ) in the recieving component. Here's my my sender's (component) code:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserDataService } from '../services/user-data.service';
import * as $ from 'jquery';

@Component({
  selector: 'user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  data: any
  form: FormGroup;
  name: string; 
  use: string;
  year: number;
  duration: string;
  milageVehicle: number;
  milageYear: number;
  passengerCoverage: string;
  postcode: string;
  towing: string;
  vehicleBrand: string;
  vehicleLicensePlate: string;
  vehicleSeries: string;


  constructor(
    private fb: FormBuilder,
    private userDataService: UserDataService
  ) { 
    this.form = fb.group({
      'name': [null, Validators.required],
      'use': [null, Validators.required],
      'year': [null, Validators.required],
      'duration': [null, Validators.required],
      'milageVehicle': [null, Validators.required],
      'milageYear': [null, Validators.required],
      'passengerCoverage': [null, Validators.required],
      'postcode': [null, Validators.required],
      'towing': [null, Validators.required],
      'vehicleLicensePlate': [null, Validators.required],
      // 'vehicleBrand': [null, Validators.required], -- Get from API
      // 'vehicleSeries': [null, Validators.required]

    })
    }
    onSubmit(data) {
      this.name = data.name;
      this.use = data.use;
      this.year = data.year;
      this.duration = data.duration;
      this.milageVehicle = data.milageVehicle;
      this.milageYear = data.milageYear;
      this.passengerCoverage = data.passengerCoverage;
      this.postcode = data.postcode;
      this.towing = data.towing;
      this.vehicleLicensePlate = data.vehicleLicensePlate;

      // Send data to service.




    }

asimhashmi · Accepted Answer · 2017-10-01 08:02:13Z

1

You can achieve this type of functionality by using BehaviorSubject. When there is data from first component you can push that data to BehaviorSubject and then subscribe to that in second component, so you can get the data as soon as it's pushed from first component. You can do something like this in your userDataService,

private userDataSubject: BehaviorSubject;
constructor() {
   this.userDataSubject = new BehaviorSubject(null);
}
pushData(data) {
  this.userDataSubject.next(data);
}
getData() {
  return this.userDataSubject.asObservable();
}

Now in your component where you are sending data, you can do something like this,

onSubmit(data) {
  this.userDataService.pushData(data);
}

And in your component, where you you receiving data, you can subscribe to get data like this,

this.userDataService.getData().subscribe(
  data => {
   console.log(data);
}
)

answered Oct 1, 2017 at 8:02

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mzaleski Over a year ago

Would I be able to access each element seperatly? It's a car insurance project. Basically, I need to run values gathered from my form through an IF statement to check basic user information and return the insurance plan that's most suited for them. E.g. if the user drives more than x kms/year return this plan...

asimhashmi Over a year ago

yes, of course you can, for verification you can see the console result of the data in your second component, it will be an object, and you can access its properties like vehicleBrand, name etc

asimhashmi Over a year ago

are you using the values in html or .ts file?

mzaleski Over a year ago

in a typescript file

asimhashmi Over a year ago

do you get the data in the console after console.log(data)?

Udi Mazor · Accepted Answer · 2017-10-01 12:18:57Z

You can use a service which will be provided at the component (unless you need the scope to be all application and in that case you inject it in any module of the application).

My advice to you is to build an interface that represents the form data and build a variable of that type. Then you simply set the data in the service on the form submit.

This will be the interface:

export interface IFrmData{
name:string;
use:string;
year:number;
duration:number;
...
}

This is the service:

import {IFrmData} from './ifrdata.interface';
inport {Injectable} from '@angular/core';
Injectable()
export class FrmService{
idata:IFrmData;
setData(_data:IFrmData):void{
idata= Object.assign({},_data);
}
    }

Now in your form component you also create a variable of type IFrmData and set its values at the onSubmit:

constructor(private frmService:FrmService){}
    onSubmit(data) {
      this.name = data.name;
      this.use = data.use;
      this.year = data.year;
      this.duration = data.duration;
      this.milageVehicle = data.milageVehicle;
      this.milageYear = data.milageYear;
      this.passengerCoverage = data.passengerCoverage;
      this.postcode = data.postcode;
      this.towing = data.towing;
      this.vehicleLicensePlate = data.vehicleLicensePlate;
      this.frmService.setData(data);
}

From this point it is very easy to get the data from ant other component as long as it has DI for that service.

you can use a subject as observer and observable to get and set the data. There is a great documentation at the angular site: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Collectives™ on Stack Overflow

(Angular2/4) Sending data from one component to another using a service

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related