CODEWITHSUNDEEP
htmltypescriptangular5angular-httpclient
stiglitz
stiglitz

Reputation: 1

How to display value obtained from server on the browser console?

I tried to retrieve value from a server using httpclient get method in angular. But I am unable to view it either on the console or on the webpage. How do I do that?

Typescript File:

export class CountryComponent implements OnInit {
   constructor(private http:HttpClient) { }
   country:Observable<Country[]>;
   ngOnInit() {
     this.country=this.http.get<Country[]>(path+"/getAllCountries");
         console.log(this.country);           
  }
}

Html:

<ul>
   <li *ngFor="let count of country">
     {{(count.id}}
   </li>
</ul>

Upvotes: 0

Views: 50

Answers (1)

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You should either use async pipe or subscribe to http request.

First way async. Let Angular deal with subscription itself

   <li *ngFor="let count of country | async">
     {{(count.id}}
    </li>

Second way subscribe:

export class CountryComponent implements OnInit {
   constructor(private http:HttpClient) { }

   country:Observable<Country[]> = [];

   ngOnInit() {
    this.http.get<Country[]>(path+"/getAllCountries").subscribe(response => {
        this.country = response;
        console.log(this.country);
    })         
  }

You can have a look at the official tutorials Http section:

https://angular.io/tutorial/toh-pt6

Upvotes: 1

Related Questions