Angular 8 with laravel 6 php mysql data

Hello to all, welcome to therichpost.com. In this post, I will tell you, angular 8 with laravel 6 php mysql data.

If you are new in Angular 8 or Laravel 6 then you can check my old posts.

Here is the complete working code and please use this carefully:

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 angular8phpmyadmindatabse//Install New Angular App

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

$ cd angular8phpmyadmindatabse//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/laravel57/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/laravel57/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;
  }

Laravel Code

1. Here is the code, you need to into your laravel 6 api.php file, where we will set the route:

Route::get('/sample-restful-apis','HomeController@getData');

2. Here is the code, you need to laravel57\app\Http\Controllers\HomeController.php file:

use DB;

class HomeController extends Controller
{
...


public function getData()
    {
         $domains = DB::table('emplyee')
        ->select('*')
        ->get(); // you were missing the get method
        return response()->json($domains);
    }


...
}

In the end here are some important notes to run this all:

1. Don’t forget to run ng serve command into your terminal.

2. Don’t forget to start your xampp.

3. Don’t forget to add your database details into laravel .env file.

For more information like database and database connectivity and file structure please check this video related to this post.

Jassa

Thank you