angular model
export interface Ipune {
EID: number;
NAME: string;
}
angular service
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Ipune } from './pune.model';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class Puneservice {
constructor(private _http: HttpClient) {
}
Save(emp: Ipune): Promise<string> {
return this._http.post<string>('http://localhost:2813/api/Doorservices/Save'
, JSON.stringify(emp)
, {headers: new HttpHeaders({'Content-Type' : 'application/json'}) }
).toPromise();
}
Update(emp: Ipune): Promise<string> {
return this._http.put<string>('http://localhost:2813/api/Doorservices/Update/' + emp.EID
, JSON.stringify(emp)
, {headers: new HttpHeaders({'Content-Type' : 'application/json'}) }
).toPromise();
}
Delete(eid: number): Promise<string> {
return this._http.delete<string>('http://localhost:2813/api/Doorservices/Delete/' + eid
, {headers: new HttpHeaders({'Content-Type' : 'application/json'}) }
).toPromise();
}
Gets(): Promise<Ipune[]> {
return this._http.get<Ipune[]>('http://localhost:2813/api/Doorservices/Gets')
.toPromise();
}
Get(eid: number): Promise<Ipune> {
return this._http.get<Ipune>('http://localhost:2813/api/Doorservices/Get/' + eid)
.toPromise();
}
}
angular component:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Puneservice } from './pune.service';
import { Ipune } from './pune.model';
@Component({
selector: 'app-createpune',
templateUrl: './createpune.component.html',
styleUrls: ['./createpune.component.css']
})
export class CreatepuneComponent implements OnInit {
PUNE: Ipune;
list: Ipune[];
PUNEFORM: FormGroup;
constructor(private ps: Puneservice) { }
ngOnInit() {
this.CLR();
this.PUNEFORM = new FormGroup({
EID : new FormControl('', Validators.required),
NAME : new FormControl('', Validators.required)
});
this.fill();
}
CLR(): void {
this.PUNE = {
EID: null,
NAME: null
};
}
fill(): void {
this.ps.Gets().then(data => this.list = data);
}
del(eid: number): void {
if (confirm('Do you want to delete it ?')) {
this.ps.Delete(eid).then(data => {
alert(data);
this.fill();
} );
}
}
edit(eid: number): void {
this.ps.Get(eid).then(data => {
this.PUNE = data;
this.PUNEFORM.patchValue({
EID : this.PUNE.EID,
NAME : this.PUNE.NAME
});
} );
}
reset(): void {
this.PUNEFORM.reset();
}
save(): void {
this.PUNE.EID = this.PUNEFORM.get('EID').value;
this.PUNE.NAME = this.PUNEFORM.value.NAME;
this.ps.Save(this.PUNE).then(data => {
alert(data);
this.PUNEFORM.reset();
this.fill();
});
}
update(): void {
this.PUNE.EID = this.PUNEFORM.get('EID').value;
this.PUNE.NAME = this.PUNEFORM.value.NAME;
this.ps.Update(this.PUNE).then(data => {
alert(data);
this.PUNEFORM.reset();
this.fill();
});
}
}
angular view
<form class="form-horizontal" [formGroup]="PUNEFORM">
<div class="form-group" >
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" formControlName="EID" id="EID" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" id="NAME" formControlName="NAME"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" value="Save" class="btn btn-primary" (click)="save()" style="width:80px" />
<input type="button" value="Update" class="btn btn-primary" (click)="update()" style="width:80px" />
<input type="button" value="Reset" class="btn btn-primary" (click)="reset()" style="width:80px" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-8">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg bg-primary">
<tr>
<th>Sl No.</th>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of list;let i=index">
<td>{{i+1}}</td>
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td>
<a (click)="edit(c.EID)">Edit</a> |
<a (click)="del(c.EID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
import { ReactiveFormsModule } from '@angular/forms';
import { Puneservice } from './pune/pune.service';
@NgModule({
declarations: [
AppComponent,
CreateEmpComponent,
CreateStapComponent,
SelectRequiredValidatorDirective,
StapListComponent,
CreateFacultiesComponent,
CreateStudentComponent,
DoctorCreateComponent,
CompareDirective,
TestCreateComponent,
CusomPip,
CreateRestComponent,
ListComponent,
RateCreateComponent,
Restpipe,
FilterPipe,
RatePipe,
DeptPipe,
CreateSalesComponent,
DeptlistComponent,
CreateDeptComponent,
CreateComponent,
WcreateComponent,
CreatepenComponent,
Checkpipe,
CreatebookComponent,
BookPipe,
CreatenoteComponent,
NotePipe1,
CreatestoreComponent,
StorePipe,
CreateluckyComponent,
LuckyPipe,
CreateunluckyComponent,
UnluckyPipe,
CreatemumbaiComponent,
MumbaiPipe,
CreatepuneComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
ReactiveFormsModule
],
providers: [EmpService, DeptServices, RateService, SalesService, StapServices,
FacultyServices, StudentServices, DoctorService, TestServices,
RestService, DoorServices, WindowServices, PenServices, AuthorServices
, BookServices, NoteServices, StoreServices, LuckyServices, UnluckyService, MumbaiService, Puneservice],
bootstrap: [AppComponent]
})
export class AppModule { }
No comments:
Post a Comment