Thursday, 7 September 2017

Angular2 crud example

Posted by D. arunkumar  |  No comments


app.module.ts

 import { BrowserModule } from '@angular/platform-browser';  
 import { NgModule } from '@angular/core';  
 import { FormsModule } from '@angular/forms';  
 import { RouterModule } from '@angular/router';  
 import { HttpModule } from '@angular/http';  
 import { AppComponent } from './app.component';  
 import { staffComponent } from './staff/staff.component';  
 import { staffService } from "./services/staff.service";  
 import { AddstaffComponent } from './addstaff/addstaff.component';  
 import { EditstaffComponent } from './editstaff/editstaff.component';  
 @NgModule({  
  declarations: [  
   AppComponent,  
   staffComponent,  
   AddstaffComponent,  
   EditstaffComponent,  
  ],  
  imports: [  
   BrowserModule,  
   FormsModule,  
   HttpModule,  
   RouterModule.forRoot([  
   { path: "staff", component: staffComponent },  
   { path: "add_staff", component: AddstaffComponent },  
   { path: "edit_staff/:id", component: EditstaffComponent }]  
  )  
  ],  
  providers: [staffService],  
  bootstrap: [AppComponent]  
 })  
 export class AppModule { }  


staff.service.ts
 import { Inject, Injectable } from '@angular/core';  
 import { Http } from '@angular/http';  
 @Injectable()  
 export class staffService{  
 private staff: Array<any>  
   constructor(private http:Http){  
   }  
   getStaff(){  
   return this.http.get('http://127.0.0.1:8000/api/get_staff').map(data=>{  
     return data.json();  
   })  
        }  
    getStaffbyId(id){  
   return this.http.get('http://127.0.0.1:8000/api/get_staffbyid?id='+id).map(data=>{  
     return data.json();  
   })  
        }  
    registerData(payLoad){  
      return this.http.post('http://127.0.0.1:8000/api/add_staff',payLoad).map(data=>{  
     return data.json();  
    })  
              }   
    updateData(id){  
      return this.http.post('http://127.0.0.1:8000/api/staff_update',id).map(data=>{  
        return data.json();  
      })  
    }  

staff.component.ts
 import { Component } from '@angular/core';  
 import { staffService } from '../services/staff.service'; 
import { NgIf } from '@angular/common'; 
 @Component({  
 selector:'<staff-list></staff-list>',    
 templateUrl:'./staff.component.html'  
 })  
 export class staffComponent {  
 private staff: any[];  
     ngOnInit() {  
        }  
   constructor(private staffSvc:staffService){  
     this.getStaff();   
   }  
   getStaff(){  
      return this.staffSvc.getStaff()  
      .subscribe(result=>{  
        this.staff=result.staff;  
      })    
     }    
 }  

staff.component.html

 <table class="table table-hover">  
  <thead>  
   <th>Id</th>  
   <th>Title</th>  
   <th>Arabic Title</th>  
   <th>Status</th>  
   <th>Action</th>  
   <th class="btn btn-primary"><a routerLink="/add_staff">Add</a></th>  
  </thead>  
   <tbody>  
    <tr *ngFor="let s of staff">  
     <td>{{s.id}}</td>  
     <td>{{s.title}}</td>  
     <td>{{s.ar_title}}</td>  
     <td *ngIf="s.status==1">Active</td>  
     <td *ngIf="s.status!=1">DeActive</td>  
     <td>  
      <a routerLink="/edit_staff/{{s.id}}" class="btn btn-primary">Edit</a>  
       
     </td>  
    </tr>  
   </tbody>  
 </table>  

addstaff.component.ts:
 import { Component, OnInit } from '@angular/core';  
 import { Router } from '@angular/router';  
 import { staffService } from '../services/staff.service';  
 @Component({  
  selector: 'app-addstaff',  
  templateUrl: './addstaff.component.html',  
  styleUrls: ['./addstaff.component.css']  
 })  
 export class AddstaffComponent implements OnInit {  
   private staff: any ={  
    "first_name":'',  
      "last_name":'',  
      "ar_first_name":'',  
      "ar_last_name":''  
   }  
   private staffList : any = [];  
  constructor( private router: Router,private staffSvc:staffService) {  
   }  
  ngOnInit() {  
  }  
  registerData(){  
   console.log(this.staff);  
   this.staffSvc.registerData(this.staff).subscribe(result=>{   
    console.log(result);  
   }  
   )  
  }  
 }  

addstaff.component.html
 <div class="form-horizontal">  
                <div class="close"> </div>  
                          <div class="head">  
                          </div>  
                          <div class="head-info">  
                               <h1>Add Staff</h1>  
                          </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >First Name:</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.first_name" placeholder="Enter First Name">  
       </div>          
      </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >First Name(Arabic):</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.ar_first_name" placeholder="Enter First Name in Arabic">  
       </div>  
      </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >Last Name:</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.last_name" placeholder="Enter Last Name">  
       </div>  
      </div>  
       <div class="form-group">  
       <label class="control-label col-sm-2" >Last Name(Arabic):</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.ar_last_name" placeholder="Enter Last Name in Arabic">  
       </div>  
      </div>  
                          <div class="form-group">   
       <div class="col-sm-offset-2 col-sm-4">  
        <button class="btn btn-primary" (click)="registerData()">Add</button>  
       </div>  
       <div class="col-sm-offset-2 col-sm-4">  
        <button class="btn btn-primary">Back</button>  
       </div>  
      </div>  
 </div>  

editstaff.component.ts
 import { Component, OnInit } from '@angular/core';  
 import {ActivatedRoute, Router , Params } from '@angular/router';  
 import { staffService } from '../services/staff.service';  
 import { Http } from '@angular/http';  
 @Component({  
  selector: 'app-editstaff',  
  templateUrl: './editstaff.component.html',  
  styleUrls: ['./editstaff.component.css']  
 })  
 export class EditstaffComponent implements OnInit {  
 private staff:any = {  
  "first_name":'',  
  "last_name":'',  
  "ar_first_name":'',  
  "ar_last_name":''  
          }  
 private StaffList:any ={}  
 private Params:any={};  
  constructor(private activatedRoute: ActivatedRoute,private staffSvc:staffService) {   
    let params: any = this.activatedRoute.snapshot.params;  
     this.Params = params.id;  
     this.getstaffbyId();  
  }  
  ngOnInit() {  
  }  
  getstaffbyId(){  
   return this.staffSvc.getStaffbyId(this.Params).subscribe(result=>{  
    this.staff=result.staff;  
   })  
  }  
  updateData(){  
   return this.staffSvc.updateData(this.staff).subscribe(result=>{  
    this.staff=result.staff;  
   })  
  }  
 }  

editstaff.component.html
 <div class="form-horizontal">  
                <div class="close"> </div>  
                          <div class="head">  
                          </div>  
                          <div class="head-info">  
                               <h1>Add Staff</h1>  
                          </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >First Name:</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.first_name" placeholder="Enter First Name">  
       </div>  
      </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >First Name(Arabic):</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.ar_first_name" placeholder="Enter First Name in Arabic">  
       </div>  
      </div>  
      <div class="form-group">  
       <label class="control-label col-sm-2" >Last Name:</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.last_name" placeholder="Enter Last Name">  
       </div>  
      </div>  
       <div class="form-group">  
       <label class="control-label col-sm-2" >Last Name(Arabic):</label>  
       <div class="col-sm-4">  
       <input type="text" class="form-control"     [(ngModel)]="staff.ar_last_name" placeholder="Enter Last Name in Arabic">  
       </div>  
      </div>  
                          <div class="form-group">   
       <div class="col-sm-offset-2 col-sm-4">  
        <button class="btn btn-primary" (click)="updateData()">Update</button>  
       </div>  
      </div>  
 </div>  

04:53 Share:

0 comments:

Get updates in your email box
Complete the form below, and we'll send you the best coupons.

Deliver via FeedBurner
Proudly Powered by Blogger.
back to top