Angular: create is deprecated: use new Observable() instead

Question

I recently updated my version of angular using ng update and when running ng lint

I am getting the error create is deprecated: use new Observable() instead

this.data$ = Observable.create(t => {
    t.next(this.model);
    t.complete();
});

What is the syntax for new observable?

Sergey · Answer 1 · 2023-06-27T14:30:14.620

80

Pretty simple

this.data$ = new Observable((observer: Observer) => {
  observer.next();
  observer.complete();
});

Updated answer

this.data$ = new Observable<void>((observer) => {
  observer.next();
  observer.complete();
});

Instead of void you can put any type your observable is supposed to emit. Observer's next value type will be inferred for the callback.

edited Jun 27 '23 at 14:30

answered Apr 05 '19 at 15:46

Sergey

3

You also should be able to use `of()` – Apr 05 '19 at 15:49
3

@OneLunchMan it's not the same. If you use `of()` it just emits values. However, `of()` is not as capable as creating an Observable. There you can place a complicated logic – Sergey Apr 05 '19 at 15:50
Gotcha, so the difference between needing more complex logic and not- – Apr 05 '19 at 16:02
4

@OneLunchMan Not that simple :). When you are using `of` you are producing `.next` with values, however if you create an observable you can react on events and then pass some data to the subscribers as well as you could count these subscribers etc. – Sergey Apr 05 '19 at 16:17
1

If "Observer" gives you a TS2314 Generic type 'Observer' error, try replacing it with "any" or "Observer". – beebus Oct 19 '20 at 19:04

score 17 · Accepted Answer · answered Aug 05 '21 at 14:15

17

In 2021 it is changed.

new Observable((observer: Observer<object>) => {
    observer.next(data);
});

instead of

new Observable((observer: Observer) => {
    observer.next();
    observer.complete();
});

answered Aug 05 '21 at 14:15

Anik Saha

score 10 · Answer 3 · answered Apr 05 '19 at 16:13

10

Or you can use just

this.data$ = of(this.model);

answered Apr 05 '19 at 16:13

Abel Valdez

score 7 · Answer 4 · answered Jun 25 '20 at 08:19

7

observableSubscription: Subscription;

Creating Custom Observable

const observer = new Observable((observer: Observer) => {
   observer.next();
   observer.error();
   observer.complete();
});

Subscribing To Custom Observable

this.observableSubscription = observer.subscribe((data:any) => {
   console.log(data);
})

Unsubscribing

this.observableSubscription.unsubscribe();

answered Jun 25 '20 at 08:19

Muhammad Bilal

I am sorry, do i understand correctly ? Observable is an object we observe. Observe or sometimes called subscriber is something that overlook our observable and react to it's next/error/complete states. If yes, why would u then make a const variable with a name observer that new Observable returns. It kinda mess logic up. – Anton Jul 12 '20 at 14:37

score 2 · Answer 5 · edited Nov 24 '21 at 09:01

on NgOnInt create custom observable like this

ngOnInit() {

const customObservable = new Observable((observer: Observer<object>){
  observer.next(this.modal);
  observer.complete();
})

subscribe it

this.customSubscription = customObservable.subscribe((data) => {

  // logic goes here 
})

}

later on, in ngOnDestroy unsubscribe it

ngOnDestroy() {
    this.customSubscription.unsubscribe();
}