Categories

Thursday, August 18, 2022
therichposts@gmail.com
Angular 8Angular 9Angular7Rest Api

Angular playing API data

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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, 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.