Angular 5 CRUD insert update delete Tutorial Part 3

Angular 5 CRUD insert update delete Tutorial Part 3

In this Post We Will Explain About is Angular 5 CRUD insert update delete Tutorial Part 3 With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Simple Angular 5 Ajax CRUD(insert update delete) tutorial Example

In this post we will show you Best way to implement Angular 5 CRUD Tutorial Example From Scratch, hear for Angular 5 CRUD Operation Using Node, Express, MongoDB with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Angular 5 CRUD Tutorial Example From Scratch

In Our previous posts We have explained Step By Step Angular 5 CRUD Operation various topics like

Phase 14: Edit and Delete the Coins.

And then, first of all, I required to Retrive the all data from the Mysql database and table grid view display in the edit HTML form. Therefor first, edit HTML form display the data like this. Below the following some source code in the angular 5 edit.component.html file.

<div class="live24u panel panel-success">
  <div class="live24u panel-heading">
    {{ title }}
  </div>
  <div class="panel-body">
    <form [formGroup]="liveFrm" novalidate>
      <div class="stud form-group live24u">
        <label class="col-md-4">Student Name</label>
        <input type="text" class="liveFrm form-control lst" formControlName="name" #name [(ngModel)] = "student.name"/>
      </div>
      <div *ngIf="liveFrm.controls['name'].invalid && (liveFrm.controls['name'].dirty || liveFrm.controls['name'].touched)" class="alert alert-danger">
        <div *ngIf="liveFrm.controls['name'].errors.required">
          Name is required.
        </div>
      </div>
      <div class="stud form-group live24u">
        <label class="col-md-4">Student Fees</label>
        <input type="text" class="liveFrm form-control lst" formControlName="fees" #fees [(ngModel)] = "student.fees" />
      </div>
      <div *ngIf="liveFrm.controls['fees'].invalid && (liveFrm.controls['fees'].dirty || liveFrm.controls['fees'].touched)" class="alert alert-danger">
        <div *ngIf="liveFrm.controls['fees'].errors.required">
          Fees is required.
        </div>
      </div>
        <div class="stud form-group live24u">
          <button (click)="updateStudent(name.value, fees.value)" [disabled]="liveFrm.pristine || liveFrm.invalid" class="btn btn-success">Update</button>
        </div>
    </form>
  </div>
</div>

Good, next Phase or step is source code the angular 5 edit.component.ts file.

Also Read :   Angular 5 CRUD insert update delete Tutorial Part 2

// edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { StudentService } from './../../student.service';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  student: any;
  liveFrm: FormGroup;
  title = 'Edit Student';
  constructor(private route: ActivatedRoute, private router: Router, private service: StudentService, private fb: FormBuilder) {
    this.makeForm();
   }

  makeForm() {
    this.liveFrm = this.fb.group({
      name: ['', Validators.required ],
      fees: ['', Validators.required ]
   });
  }

  updateStudent(name, fees) {
    this.route.params.subscribe(params => {
    this.service.updateStudent(name, fees, params['id']);
    this.router.navigate(['index']);
  });
}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.student = this.service.editStudent(params['id']).subscribe(data_results => {
        this.student = data_results;
      });
    });
  }
}

After that, also below the source code into the main file student.service.ts in angular file.

import { Injectable } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class StudentService {

  result: any;
  constructor(private http: HttpClient) {}

  addStudents(name, fees) {
    const live_url = 'http://YOUR_SERVER_PORT/students/add';
    const my_object = {
      name: name,
      fees: fees
    };
    this
      .http
      .post(live_url, my_object)
      .subscribe(data_results =>
          console.log('Good Luck Done!'));
  }

  getStudents() {
    const live_url = 'http://YOUR_SERVER_PORT/students';
    return this
            .http
            .get(live_url)
            .map(data_results => {
              return data_results;
            });
  }

  editStudent(id) {
    const live_url = 'http://YOUR_SERVER_PORT/students/edit/' + id;
    return this
            .http
            .get(live_url)
            .map(data_results => {
              return data_results;
            });
  }

  updateStudent(name, fees, id) {
    const live_url = 'http://YOUR_SERVER_PORT/students/update/' + id;

    const my_object = {
      name: name,
      fees: fees
    };
    this
      .http
      .post(live_url, my_object)
      .subscribe(data_results => console.log('Good Luck Done!'));
  }
}

We have already above source code edit and update this service to create webservice an API http request call. Therefor till now,angular 5 crud operation Create, Read, Update is done successfully. Now, simple take a look at last module Delete.

Also Read :   How to display pdf file in HTML - PDF Viewer HTML5 Example

After that, We are some coding the All the main file index.component.html in angular 5 file.

<table class="table table-hover">
  <thead>
  <tr>
      <td>Student Name</td>
      <td>Student Fees</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let student of students">
          <td>{{ student.name }}</td>
          <td>{{ student.fees }}</td>
          <td><a [routerLink]="['/edit', student._id]" class="btn btn-success">Edit</a></td>
          <td><button (click)="removeStudent(student._id)"  class="btn btn-danger">Delete</button></td>
      </tr>
  </tbody>
</table>

as well as, below the removeStudent() angular 5 function edit.component.ts main file.

removeStudent(id) {
    this.service.removeStudent(id).subscribe(data_results => {
      console.log('student Deleted');
    });
}

Last step, All the source code student.service.ts file Below like this source code.

import { Injectable } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class StudentService {

  result: any;
  constructor(private http: HttpClient) {}

  addStudents(name, fees) {
    const live_url = 'http://YOUR_SERVER_PORT/students/add';
    const my_object = {
      name: name,
      fees: fees
    };
    this
      .http
      .post(live_url, my_object)
      .subscribe(data_results =>
          console.log('Good Luck Done!'));
  }

  getStudents() {
    const live_url = 'http://YOUR_SERVER_PORT/students';
    return this
            .http
            .get(live_url)
            .map(data_results => {
              return data_results;
            });
  }

  editStudent(id) {
    const live_url = 'http://YOUR_SERVER_PORT/students/edit/' + id;
    return this
            .http
            .get(live_url)
            .map(data_results => {
              return data_results;
            });
  }

  updateStudent(name, fees, id) {
    const live_url = 'http://YOUR_SERVER_PORT/students/update/' + id;

    const my_object = {
      name: name,
      fees: fees
    };
    this
      .http
      .post(live_url, my_object)
      .subscribe(data_results => console.log('Good Luck Done!'));
  }

  removeStudent(id) {
    const live_url = 'http://YOUR_SERVER_PORT/students/delete/' + id;

        return this
            .http
            .get(live_url)
            .map(data_results => {
              return data_results;
            });
  }
}

In this Post, We have not done any source code that does not prevent the page Please refresh; You required to angularjs refresh the page to display the changes. Therefor We just want you to Learn that this is how you can write the Angular 5 (Insert update and delete) CRUD web application.

Also Read :   Vuejs interview questions and answers | Vuejs Interview - Vuejs Top 10 Interview Qyestions

Angular 5 CRUD Tutorial Example From Scratch

In Our previous posts We have explained Step By Step Angular 5 CRUD Operation various topics like

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Angular 5 with Web API – CRUD Operations And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.