Angular subscribe is deprecated

I am having a problem with Angular. I am new to it and was following the guide from this video.

At around the 12 minute mark, when he adds the subscribe function and adds response and error, my subscribe function gets struck, e.g.: subscribe

This is my code for file 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 it’s 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


Is there a solution?

Continue reading...