trouble sharing object between two component using BehaviorSubject Angular 5

Question

I'm trying to share an object between two components through a service.

The component option-post.component is meant to display this object or an array of those objects. The component option-post-choix.component is used to select which objects you want option-post.component to display. I use option-data.service to share the data between both components.

I can see with the console.log('service recv', data) in option-data.service that my data arrives to the service but in option-post.component I can see with console.log('recv',this.option_select) that I only receive an empty array. I also use rxjs/BehaviorSubject because option-post subscribe only after the data being emit by the service.

The logic is really inspired by this stackoverflow question and this answer but I'm a bit clueless right now. I've already check that my service is only provide one time in module.ts

My question is: why the array is empty in option-post.component after it pass through my service, where he is not ?

option-data.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { Options } from './option-post-choix/option';

@Injectable()
export class OptionDataService {
  private getDataSubject: BehaviorSubject<Options[]> = new BehaviorSubject([]);
  getData$: Observable<Options[]> = this.getDataSubject.asObservable();

  constructor() {
  }

  getData(data) {
  console.log('service recv', data);
  this.getDataSubject.next(data);
 }
}

option-post-choix.component.ts

import { Options } from './option';
import { OptionDataService } from '../option-data.service';

@Component({
selector: 'app-option-post-choix',
templateUrl: './option-post-choix.component.html',
styleUrls: ['./option-post-choix.component.css']
})
export class OptionPostChoixComponent implements OnInit {

 // simulation data
 options_choix = [
  new Options(0, 'Option 1', 'texte option 1', 15),
  new Options(1, 'Option 2', 'texte option 2', 150),
  new Options(2, 'Option 3', 'texte option 3', 50)
 ];

 constructor(private location: Location) { }

 option_select: Array<Options> = [];
 private dataTrans: OptionDataService = new OptionDataService;

 onValidClicked() {
 this.dataTrans.getData(this.option_select);
 this.location.back();
 }

 addOpt(opt, check) {
  console.log('id ', opt.id, 'is', check);
  if (!check) {
   this.option_select.push(opt);
  } else {
   this.option_select.splice(this.option_select.findIndex(x => x.id === opt.id), 1);
  }
}

option-post.component.ts

import { OptionDataService } from '../option-data.service';
import { Options } from '../option-post-choix/option';
import { Observable } from 'rxjs/Observable';


@Component({
selector: 'app-option-post',
templateUrl: './option-post.component.html',
styleUrls: ['./option-post.component.css']
})
export class OptionPostComponent implements OnInit {

 public option_select: Options[];

 constructor(private router: Router, private data: OptionDataService) {

 }

 ngOnInit() {
  this.data.getData$.subscribe(option_select =>
  this.option_select = option_select);
  console.log('recv', this.option_select); //empty array []

 }

 addOption() {
  this.router.navigate(['/home/optionPostChoix']);
 } 

}

option-post.component.html

<div class="element_liste">
      <div class="option_box"  *ngFor="let opt of options_select">
          {{opt.titre}}
          <div class="option_elem">
            {{opt.texte}}
          </div>
        </div>
  </div>

option.ts Is where I declare my object Options that I want to share

export class Options {
constructor(
    public id: number,
    public titre: string,
    public texte: string,
    public prix: number
 ) {}
}

Answer 1

thanks to Nabin Kumar Khatiwada my problem is solve :

change in option-post-choix.component from

constructor(private location: Location){}

to

constructor(private location: Location, private dataTrans: OptionDataService) {}

and remove

private dataTrans: OptionDataService = new OptionDataService;