CODEWITHSUNDEEP
angulartypescriptrxjs
user9599100
user9599100

Reputation: 63

Angular subscribe is deprecated

I am having a problem with angular. I am new to it and was following the guide from this video https://www.youtube.com/watch?v=dT1ID4q57fs&list=PLXKzVP4cRi8A4G6vnFB5bKpAStskhFwG0&index=3 At around the 12 minute mark when he adds the subscribe function and adds response and error, my subscribe function gets striked eg: subscribe

This is my code for home.component.ts

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs'
import { CursorError } from '@angular/compiler/src/ml_parser/lexer';
import { AppService } from '../app.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  /** Based on the screen size, switch from standard to one column per row */
  cards:any = [];
  cardsForHandset:any = [];
  cardsForWeb:any = [];

  isHandset: boolean = false;
  isHandsetObserver: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return true;
      }

      return false;
    })
  );

  constructor(private breakpointObserver: BreakpointObserver,
    public appService:AppService) {}

  ngOnInit(){
    this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );
  }


  loadCards(){
    this.cards = this.isHandset? this.cardsForHandset:this.cardsForWeb;
  }

}

This is the message it shows

I saw some solutions saying its the version of typescript but changing those didn't fix it. I'm on windows using vs code, but it works for my friends using ubuntu. This is the version when I type ng --version:

Angular CLI: 13.2.6
Node: 16.14.0
Package Manager: npm 8.3.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1302.6 (cli-only)
@angular-devkit/core         13.2.6 (cli-only)
@angular-devkit/schematics   13.2.6 (cli-only)
@schematics/angular          13.2.6 (cli-only)
rxjs                         6.6.7
typescript                   4.6.2

Any solution would be helpful, thanks!

Upvotes: 3

Views: 18197

Answers (2)

Karthikeyan G
Karthikeyan G

Reputation: 31

There are Limitations of the subscribe error handler, there are a few more operators that allow us to implement more advanced error handling strategies.

this.appService.getDeals()
        .pipe(
            catchError(err => of([]))
        )
        .subscribe({
            next: (response) => {
                this.cardsForHandset = response.handsetCards;
                this.cardsForWeb = response.webCards;
                this.loadCards();
            },
            error: (err) => {
                 alert('There was an error in retrieving data from the server');
            }
        });

reference included here

Upvotes: 1

Nalin Ranjan
Nalin Ranjan

Reputation: 1782

For example, in above case, instead of writing this...

this.isHandsetObserver.subscribe(currentObserverValue => {
      this.isHandset = currentObserverValue;
      this.loadCards();
    });

    this.appService.getDeals().subscribe(
      response => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
      },
      error => {
        alert('There was an error in retrieving data from the server');
      }
    );

we will be writing...

this.isHandsetObserver.subscribe({
    next: (currentObserverValue) => {
        this.isHandset = currentObserverValue;
        this.loadCards();
    }
});

this.appService.getDeals().subscribe({
    next: (response) => {
        this.cardsForHandset = response.handsetCards;
        this.cardsForWeb = response.webCards;
        this.loadCards();
    },
    error: (error) => {
        alert('There was an error in retrieving data from the server');
    }
});

Upvotes: 9

Related Questions