Angular 9 with HTTP use?

[Sampath Tharanga]

Hi,

I'm a beginner with Angular9. So, I need to display data with coming to HTTP url(GET API link). Please help me to solve this problem.

Here my code, It's wrong. Help me to solve this.

import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { map, catchError} from 'rxjs/operators';

interface Course {

    description: string;

    courseListIcon:string;

    iconUrl:string;

    longDescription:string;

    url:string;

}

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent {

    courses$: Observable<Course[]>;

    constructor(private http:HttpClient) {

    }

    ngOnInit() {

        this.courses$ = this.http

            .get<Course[]>("https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx") // HERE URL

            .map(data => _.values(data))

            .do(console.log);

    }

}

[bastien lemaire]

Hi,

I hope you have fun with angular9 ;)

RXJS have changed a little overtime and the syntax are using is not the latest.

 ngOnInit() {
        this.courses$ = this.http
            .get<Course[]>("https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")

 .pipe(
 map(data => _.values(data)),
 tap(console.log),
 )
    }

Additionally, you need to subscribe to courses$ you can do that directly in the template using the async pipe: 

<div *ngFor="let course of courses$ | async">{{ course | json }}<div>