Tuesday, November 29, 2022
Angular 8Angular 9Angular7Rest Api

Angular playing API data

Angular playing api data

Hello to all, welcome to In this post, I will tell you, how to playing with API data in Angular 7, Angular 8 and Angular 9.

Post Working:

In this post, I will show the code snippet in which I am getting data from laravel in json format and I am getting that json data in my angular 9 application with the help of HttpClient and then call that data into my angular html component.

This will be helpful in Angular 7, Angular 8 and Angular 9.

Here is the working code snippet and please use carefully:

1. Here is the code for app.component.ts file:

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

export class AppComponent implements OnInit {
  data: any;
  constructor( private http: HttpClient) { 
    // Example API DATA Format [{"id":22,"title":"Title 1"},{"id":23,"title":"Title 2"},{"id":24,"title":"Title 3"},{"id":25,"title":"Title 4"}]
    this.http.get('APIURL').subscribe(data => { = data;
        }, error => console.error(error));



2. Here is the code for app.component.html file:

 <li *ngFor="let item of data; let i = index" []="i">


This is it and I think this will be helpful and if you have any query then please let me know.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.