Angular subscribe is deprecated

Question

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!

Answer 1

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');
    }
});