Angular BehaviourSubject only being triggered sometimes

Question

I have a component called Database and a Service (DatabaseService).

Then I have a BehaviourSubject that has the current database status and I want to get that status on the App Component.

So on the app.component.ts I subscribe to the BehaviourSubject.

I get the initial value from the BehaviourSubject and I get the value after the .next() is called on the database service constructor but if I call .next() on the database component I don't get the value on the app component.

I already tried to put the call to the .next() on a method inside the database service but it didn't work.

Database.component.ts

@Component({
  selector: 'app-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss'],
  providers: [DatabaseService]
})


export class DatabaseComponent implements OnInit, OnDestroy {

  ...

  constructor(
      private databaseService: DatabaseService,
  ) {
  }

  ngOnInit(): void {
    ...
  }

  updateDatabaseStatus(): void {
    this.databaseService.databaseStatus.next(this.StatusId.value);
  }

  ngOnDestroy(): void {
    ...
  }
}

database.service.ts

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

    public databaseStatus = new BehaviorSubject<DatabaseStatus>(DatabaseStatus.Open);

    constructor(private api: ApiService) {
      this.getSettingsDatabaseStatus().subscribe(data => {
        this.databaseStatus.next(data[0].statusId);
      });
    }

    public getSettingsDatabaseStatus(): Observable<Status> {
      ...
    }

    public updateCurrentDatabaseStatus(status: DatabaseStatus): void {
      this.databaseStatus.next(status);
    }
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {


  public databaseStatus = 'Open';

  constructor(public router: Router,
              private _api: ApiService,
              private databaseService: DatabaseService) {
  }

  ngOnInit(): void {

    this.databaseService.databaseStatus.subscribe(status => {
      this.databaseStatus = DatabaseStatus[status];
    });
  }

  ngOnDestroy(): void {
    ...
  }
}

Answer 1

The problem is you've created more than one instance of the DatabaseService.

In your database service the code providedIn: 'root' means that a unique instance of that service will be created at the root of your application. i.e. all your components will have access to that instance.

However, in your database.component you added the code providers: [DatabaseService] which then created a new, unique, local instance of that service that only that component will use.

I'd recommend that you remove that code from your database.component and only provide the service at the root level.

Also you definitely want to only call the .next() function from the database service.

For example your database.component code would look like this:

@Component({
  selector: 'app-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss']
})


export class DatabaseComponent implements OnInit, OnDestroy {

  ...

  constructor(private databaseService: DatabaseService) {
  }

  ngOnInit(): void {
    ...
  }

  updateDatabaseStatus(): void {
      this.databaseService.updateCurrentDatabaseStatus(this.StatusId.value);
  }

  ngOnDestroy(): void {
    ...
  }
}

You should be able to leave your app.component and DatabaseService code the way it is then.