Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations

Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations

Today, We want to share with you Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations.
In this post we will show you Angular 6 Insert Update delete Example, hear for Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations we will give you demo and example for implement.
In this post, we will learn about Insert, Update, Delete Data in MySQL using Angular 6 with PHP with an example.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client

Angular 6 CRUD Example – Part 2

Step 4: Make a JSON server that serves the simple data.

i should the fake dummy data to work with that is why I have to use one package called as a json-server for this Example. With it, I can make a fake server side called REST api.

Read Also:  Eloquent Right Join Queries in Laravel Example

npm install -g json-server

make one file called Student.json . so us add the following some data inside like as a Student.json file.

// Student.json 

{
    "students": [{
        "id": 1,
        "name": "ND",
        "country": "Mumbai",
    "gender":"Male",
    "department":"Google adsense"
    }, {
        "id": 2,
        "name": "krulana",
        "country": "gova",
    "gender":"FEMale",
    "department":"Youtube"
    },{
        "id": 3,
        "name": "jaydeeo",
        "country": "rajkot",
    "gender":"Male",
    "department":"SEO"
    }]
}

And then, first of all the start the pure JSON server using the following some command.

json-server --watch Student.json

Step 5: Setup HttpClient for service.

Angular 6 is full best Frontend Framework custom javascripts, therefor it has depenedet HTTP module. therefor first let us configure inside Like as app.module.ts file.

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
],

And then, make models folder inn this file and inside models folder, make one file called like as a student.model.ts.

Read Also:  PHP download file from url using curl example

// student.model.ts

export class Student {
    id: number;
    name: string;
    country: string;
    gender: string;
    department: string;
}

// student.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class StudentService {
    LIVE_URI = 'http://localhost:3000';
    constructor(private httpClient: HttpClient) { }
    getStudents() {
        return this.httpClient.get(`${this.LIVE_URI}/students`);
    }
}

And then, import student.service.ts service file data and student.model.ts model file inside this file list-students.component.ts file.

// list-students.component.ts

import { Component, OnInit } from '@angular/core';
import { Student } from '../models/student.model';
// Import StudentService
import { StudentService } from './student.service';

@Component({
  selector: 'app-list-students',
  templateUrl: './list-students.component.html',
  styleUrls: ['./list-students.component.css']
})
export class ListStudentsComponent implements OnInit {
  students: Student[];
  constructor(private _studentService: StudentService) { }

  ngOnInit() {
    this.getStudents();
  }

  public getStudents() {
    this._studentService.getStudents().subscribe((data: Student[]) => {
      this.students = data;
    });
  }
}

js Loop through that simple data and view it as a DOM HTML table inside list-students.component.html file.

<table class="table table-bordered">
    <thead>
        <tr>
            <th>stud Id</th>
            <th>stud Name</th>
            <th>stud City</th>
            <th>stud Gender</th>
            <th>stud Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.country}}</td>
            <td>{{student.gender}}</td>
            <td>{{student.department}}</td>
        </tr>
    </tbody>
</table>

More Details of the Angular 6 Angular 6 Introduction Tutorial features of angular 6.0

Read Also:  Laravel INSERT Multiple Rows Into a Table

Angular 6 Examples

There are the Angular 6 Step By Step Example and Learning AngularJS

We hope you get an idea about Angular 6 CRUD Example
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Angular 7|8|9 Validate Mobile number With 10 Digits Example
  2. Read Also:  Angular 6 AJAX Tutorial Example From Scratch
  3. Read Also:  WooCommerce Get Product Variations
  4. Read Also:  How to count files in a directory using PHP Laravel?
  5. Read Also:  Reset Password Form Free bootstrap Widget Template
  6. Read Also:  How to get last record from MySQL table in Laravel?
  7. Read Also:  Remove empty values from array in PHP
  8. Read Also:  Data Tables State save local storage in jQuery
  9. Read Also:  How to check if file exists or not in Laravel 5?
  10. Read Also:  How To Add Flash Messages in Laravel 6 Session?
CLOSEX