如何将 BehaviorSubject 与 Observable 一起使用

Question

I have a div and need to add attribute depends on store result. The store works as expected, when I click on certain div it's value changed (return true or false ) and in my component I need to get updated value, but as I call it in ngOnInit it works only once and not updating. I've read about BehaviorSubject but don't understand how to convert my observable to it correctly. Would appreciate any help!

Here's my code

html

<div class="details__header" [attr.isOpened]="isOpened ? 'opened' : 'closed'">

ts

isOpened: boolean;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.store.select(selectSearchResultState).subscribe(el => this.isOpened = el);
}

I've tried async pipe in html and it works, but I need to use this variable in my code, so this doesn't work for me

Answer 1

You should define isOpened as an Observable like this:

isOpened$: Observable<boolean>;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.isOpened$ = this.store.select(selectSearchResultState);
}

Then use it in the template with an async pipe:

<div class="details__header" [attr.isOpened]="(isOpened$ | async) ? 'opened' : 'closed'">

There's more information about observables in the documentation here .