Angular 8 restful api working example

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.