Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 8Laravel 6Mysql

Angular 8 with laravel 6 php mysql data

Angular 9 Laravel 7 Auth Login working tutorial Part 2

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.

Angular 8 with laravel 6 php mysql data
Angular 8 with laravel 6 php mysql data

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

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 14, Angular 15, Angular 16, Angular 17, 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.