Subscribe to a observable not working in Angular

Question

I'm trying to see if i can subscribe to a variable of type observable. when i bind input with [(ngModel)] the changes don't seem to trigger.

Code:

@Component({
  selector: 'alert',
  template: '<input type="text" [(ngModel)]="test" />'
})

export class alertComponent {
  default:String: 'testValue';
  test = Observable.of(this.default).subscribe(x => {
    console.log(x); // only logs for first time
  });
}

what is `testValue ` here? – Pardeep Jain Feb 05 '19 at 05:31 — Pardeep Jain, Feb 05 '19 at 05:31
@PardeepJain you can check the edit hope its more clear – super cool Feb 05 '19 at 05:39 — super cool, Feb 05 '19 at 05:39

score 1 · Answer 1 · answered Feb 05 '19 at 05:33

1

RxJS 6 and above

import { of } from 'rxjs';

of("testValue").subscribe(x => {
  console.log(x)
})

Refer Could not use Observable.of in RxJs 6 and Angular 6

answered Feb 05 '19 at 05:33

Ininiv

1,325
7
12

i use 5.5 version of rxjs – super cool Feb 05 '19 at 05:40
`import { of } from 'rxjs/observable/of';` – Ininiv Feb 05 '19 at 05:55
able to import `of` but `of("testValue")` you got to assign else it wont compile in first place. it fires only once. – super cool Feb 05 '19 at 06:25

Dhananjai Pai · Answer 2 · 2019-02-05T05:50:45.063

0

Observable.of only triggers once. And this is why it is working the first time for you.

If you want to trigger some action you could directly bind it to the ngModelChange event rather than converting it to an observable and subscribing to it ?

You may as well be interested in this question How can I make an input observable?

edited Feb 05 '19 at 05:50

answered Feb 05 '19 at 05:48

Dhananjai Pai

5,914
1
10
25

yes that seem to be one way i agree, not sure if there is better way just like we do it in angular.js/knockout.js . – super cool Feb 05 '19 at 05:50
You can refer to the question tagged that may interest you. Hope this helps! – Dhananjai Pai Feb 05 '19 at 05:51

Davy · Answer 3 · 2019-02-05T06:41:01.987

If you want to have your modelvalue as a subscribeable:

@Component({
  selector: 'alert',
  template: `
    <input type="text" 
        [(ngModel)]="myValue"
        (ngModelChange)="myValue$.next($event)"
        (blur)="touched$.next($event)"
/>
    `
})

export class alertComponent {
  default:String: 'testValue';
  myValue: string;
  myValue$ = new Subject<string>();
  touched$ = new Subject<any>();

}

I added the handler on the blur event just to show that you can use this on any type of event.

Another way to operate on any type of event is the rxjs fromEvent method.

In case you never seen the "$" suffix: it is a popular naming convention to add it to anything subscribable.

Subscribe to a observable not working in Angular

3 Answers3