Angular playing API data

Hello to all, welcome to therichpost.com. 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 => {
        this.data = data;
        }, error => console.error(error));
  }

}

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

<ul>
 <li *ngFor="let item of data; let i = index" [attr.data-index]="i">
   {{item.title}}
 </li>
</ul>

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

Jassa

Thank you