'Bind input element to Observable in Angular

I'm missing something basic. But all similar posts that i found contained solutions with @Input and objects i haven't found any with a simple variable.

So i have a component with a list of posts and a input.

so here is my HTML:

<input placeholder="Enter value that title or body should conain" [(ngModel)]="filterString$" />

And here is my Typescript:

filterString$ = new BehaviorSubject<string>('').asObservable();

this.filterString$.subscribe((filterString) => {
   this.filterPosts(filterString);
});

The problem is that it fires only once ( ofc because i have a problem exactly in HTML binding ). and input displays: [object Object]

What is incorrect in my binding?

htmlangularrxjs


Solution 1:[1]

I don't think you can bind an observable to ngModel input. Anyway you can do it much simpler, for example like this:

<input (ngModelChange)="filterPosts($event)" [(ngModel)]="filterString" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zerotwelve

Related Questions