Angular 8Angular 9Angular7Rest Api

Angular playing API data

Angular playing api data
Views

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL