Web Services Implementation in Angular Framework using Insert,Update,Delete,Select Operation

TypeScript Code for CRUD Operation:-


import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  tid
  data:string='';
  truckno:string='';
  tdesc:string='';
  public truckdata = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    truckdata= this.http.get("http://shivaconceptsolution.com/webservices/showtruck.php").subscribe((data) => {
         this.truckdata = Array.from(Object.keys(data), k=>data[k]);
 
      });;
  }
  Truck () {

   let t = {'tno':this.tid,'tdet':this.tdesc};
  this.http.post("http://shivaconceptsolution.com/webservices/truck.php",t,httpOptions).subscribe((res)=>{
            console.log(res);
       
        });
        alert('data inserted');
}
updatetruck () {

       let t = {'tid':this.tid,'tno':this.truckno,'tdet':this.tdesc};
  this.http.post("https://shivaconceptsolution.com/webservices/uptruck.php",t,httpOptions).subscribe((res)=>{
            console.log(res);
     
        });
 /* this.http.put("https://shivaconceptsolution.com/webservices/uptruck.php?tid"+this.tid,httpOptions).subscribe((res)=>{
            console.log(res);
         
        });*/
     
        alert('data updated');

    }

        deletetruck() {

   let t = {'tid':this.tid};
  this.http.post("https://shivaconceptsolution.com/webservices/deltruck.php",t,httpOptions).subscribe((res)=>{
            console.log(res);
         
        });
   /*this.http.delete("https://shivaconceptsolution.com/webservices/deltruck.php?tid"+this.tid,httpOptions).subscribe((res)=>{
            console.log(res);
         
        });*/   
        alert('data deleted');

    }
    login()
{
    let t = {'emailid':this.tid,'pwd':this.tdesc};
this.http.put("https://shivaconceptsolution.com/webservices/userlogin.php",t,httpOptions).subscribe((res)=>{

            console.log(res);
           //this.data=res.status;
            if(this.data=="1")
        {
       alert('login successfully');
       }
       else
       {
       alert('invalid user id and password');
       }
         
        });
   
   }
}



Design File:-


<h1>Add Truck Details Here</h1>

<form name="frm" id="frm">

     <label for="name">Enter Truck ID for update and delete</label>
    <input type="text" class="form-control" [(ngModel)]="tid" name="tid" required>
    <br>
    <br>
    <label for="name">Truck NO</label>
    <input type="text" class="form-control" [(ngModel)]="truckno" name="truckno" required><br><br>
      <label for="alterEgo">Truck Desc</label>
      <input type="text" class="form-control" [(ngModel)]="tdesc" name="tdesc" /><br><br>
  <button type="submit" class="btn btn-success" (click)="Truck()">add</button>
<button type="submit" class="btn btn-success" (click)="updatetruck()">Update</button>
<button type="submit" class="btn btn-success" (click)="deletetruck()">delete</button>
<button type="submit" class="btn btn-success" (click)="login()">Login</button>
  </form>


<table>
<tr><th>ID</th><th>Truckno</th><th>Truck Details</th></tr>
   <tr *ngFor="let item of truckdata; let i = index">
     <td></td>{{item.id}}<td>{{item.truckno}}</td><td>{{item.truckdetails}}</td>
   </tr>
</table>



Write Code on app.module.ts
'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule,HttpHeaders } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration/registration.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }