Hello to all. welcome to therichpost. In this post, I will tell you, Angular 8 restful api working example.

Here you can check more posts related to Angular 8.

First of all, thank you to all to make my website much better in google ranking. I will work hard for my blog and I will share good post and hope my post will help you out.

In this post, I will tell you, How to work with Angular 8 restful api and I am getting data from Laravel or I can say Laravel is my backend.

Rest API means transfer the data from one to other and In Angular 8, I will use HttpClient to fetch the data from laravel.

I will tell you the very simple code to do this thing.

Here is the complete working code and please add this carefully into your Angular 8 application.

1. Let start, here are the basics commands to set Angular 8 into your pc:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

 

2. After all above setup, here is code, you need to add into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

3. Here is the code, you need to add app.component.ts file:

This is laravel project path(http://localhost/blog/public/api/sample-restful-apis)where I have set the api from where I am getting the data.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8restapi';
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
    }, error => console.error(error));
  }
}

 

4. Here is the code you need to add into app.component.html file:

<table>
    <tr>
      <th>Name</th>
      <th>Domain</th>
      
    </tr>
    <tr *ngFor="let mydata of data[0]">
      <td>{{mydata.name}}</td>
      <td>{{mydata.domain}}</td>
    </tr>
</table>

 

5. Here is the code, you need add into app.component.css file:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

 

6. Here is the final code, you need to into your laravel api.php file, where we will have the data to show in angular 8 application:

...
Route::get('sample-restful-apis', function()
{
    return response()->json([
        [
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
            ]
        ]);
});
...

 

 

In the end don’t forget to run ng serve command to enjoy the final output.

If you have any query then please let me know or comment below.

Jassa Jatt

Thank you