I'm working with Angular 6 and I've got a strange subscribe behavior, so when I call reload method for three times from the constructor it works fine and I got three log message "subscribe".

But when I click on a button which have (click)="reload()", the reload is executed but the subscribe is never executed.

company-edit.component.ts

export class CompanyEditComponent implements OnInit {

company$ : Observable<any>;

company: Company;

formCompany: Company;

refDb: any;



  constructor(private db: AngularFireDatabase, private companyService: CompanyService) {

    this.refDb = db.object('company');

    this.company$ = this.companyService.getCompanyObservable();

    this.reload();

    this.reload();

    this.reload();

  }



  reload(){

    console.log("reload");

    this.refDb = this.db.object('company');

    this.company$ = this.companyService.getCompanyObservable();

    this.formCompany = new Company("","");

    this.company$.subscribe( (company)=>{ console.log("subscribe");



      this.company = company;

      console.log(this.company);



      if (company)

        this.formCompany = company;

    });

    // this.formCompany = {"name":"kk","fondator":"gg"};

  }

company-edit.component.html

<div>

        <mat-form-field>

            <input matInput [(ngModel)]="formCompany.name" placeholder="Name">

        </mat-form-field>

        <br>

        <mat-form-field>

            <input matInput [(ngModel)]="formCompany.fondator"  placeholder="Fondateur">

        </mat-form-field>

        <br>

        <button mat-raised-button color="primary"(click)="submit()">Save</button> |

        <button mat-raised-button color="accent"(click)="update()">Update</button> |

        <button mat-raised-button color="warn"(click)="delete()">Delete</button> |

        <button mat-raised-button color="" (click)="reload()">Reload</button>

    </div>

company.service.ts

export class CompanyService {

  company$ : Observable<any>;

  refDb: any;



    constructor(private db: AngularFireDatabase) {

      this.refDb = db.object('company');

      this.company$ = this.refDb.valueChanges();

    }



    getCompanyObservable(){

      return this.company$;

    }

It looks like you need the latest value received from the server. You can achieve the same by using BehaviorSubject

export class CompanyService {

  //company$ : Observable<any>;



   public data: BehaviorSubject<any> = new BehaviorSubject(null);



   refDb: any;



    constructor(private db: AngularFireDatabase) {

      this.refDb = db.object('company');

      //this.company$ = this.refDb.valueChanges();

      this.refDb.valueChanges().subscribe(data=>this.data.next(data));

    }



    getCompanyObservable(){

      return this.data.asObservable();

    }