title: Angular 7 Singleton Service To Communicate between two components
body: <p>I have two components and a service. I want to use the service to store a common value. <code>StripeComponent</code> sets the value in the service. I get the following error:</p>
  
  <blockquote>
    <p>Cannot read property 'setAddress' of undefined</p>
  </blockquote>
  
  <p>Here is my component:</p>
  
  <pre><code>import { Component, ViewChild, OnInit } from '@angular/core'
  import { NgForm } from '@angular/forms'
  
  import { Address } from '../_models/address'
  import { Observable } from 'rxjs';
  import { ConfigService } from '../_services/config.service';
  
  declare var Stripe;
  @Component({
    selector: 'app-stripe',
    templateUrl: './stripe.component.html',
    styleUrls: ['./stripe.component.css'],
    providers: [ConfigService]
  })
  export class StripeComponent implements OnInit {
    public address = 
      new Address(
    {
      name:"",
      address_city: "",
      address_line1: "",
      address_line2: "",
      address_state: "",
      address_zip: "",
      address_country: ""
    }
  )
  configService: ConfigService 
  
    constructor() {         
     }
  
    ngOnInit(){
    // create observable address$
      this.address$.subscribe( (address: Address) =&gt; { 
      console.log(address); }) ;
  
        this.configService.setAddress(this.address); &lt;-- error here
  
    } 
  
  }
  </code></pre>
  
  <p>Here is my service:</p>
  
  <pre><code>import { Injectable } from '@angular/core'
  import { Address }from '../_models/address';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ConfigService {
  
    constructor() { }
  
    private config : Address;
    // set the address from stripe component
      setAddress(value) {
        this.config = value;
      }
  
    public getAddress() {
            return this.config;
    }
  </code></pre>
  
  <p>}</p>