Wednesday, May 29, 2024
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 14, Angular 15, Angular 16, Angular 17, 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.