F:\Crud\cruddemo
F:\Crud\regdemo
1. create register component
ng g c register
2. create a service
ng g s register
3. install json server
npm install -g json-server
4. start json server
json-server --watch db.json
5. edit db.json
{
"emp": [
{
"eno": 101,
"ename": "anil",
"salary": "20000"
}
]
}
6. Code for app.module.ts:
import { BrowserModule } from '@angular/
platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-
routing.module';
import { AppComponent } from './
app.component';
import { RegisterComponent } from './
register/register.component';
import { RegisterService } from './
register.service';
import { HttpClientModule } from '@angular
/common/http';
import{FormsModule} from '@angular/forms';
import { from } from 'rxjs';
@NgModule({
declarations: [
AppComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,FormsModule
],
providers: [RegisterService],
bootstrap: [AppComponent]
})
export class AppModule { }
7. code for register.service.ts
import { Injectable } from '@angular/
core';
import{HttpClientModule,HttpClient} from '
@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class RegisterService {
constructor(private http:HttpClient) { }
SaveUser()
{
}
GetUser()
{
return this.http.get("http://
localhost:3000/emp");
}
}
8.code for register.component.ts:-
import { Component, OnInit } from '@angula
r/core';
import { RegisterService } from '../
register.service';
@Component({
selector: 'app-register',
templateUrl: './
register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements
OnInit {
eno:number;
ename:string;
salary:number;
emplist:any;
constructor(private reg:RegisterService)
{ }
ngOnInit()
{
this.reg.GetUser().subscribe(res=>
{
this.emplist=res;
});
}
}
9. code for register.component.,html:-
Enter Eno
<input type="text" [(ngModel)]="eno">
<br>
Enter Ename
<input type="text" [(ngModel)]="ename">
<br>
Enter Salary
<input type="text" [(ngModel)]="salary">
<br>
<input type="button" (click)="onSubmit()"
value="Save">
<br>
<table>
<tr>
<td>Eno</td>
<td>Ename</td>
<td>Salary</td>
</tr>
<tr *ngFor="let user of emplist">
<td>{{ user.eno }}</td>
<td>{{ user.ename}}</td>
<td>{{user.salary}}</td>
</tr>
</table>
10. code for app.component.html:-
<!--The content below is only a placeholde
r and can be replaced.-->
<app-register></app-register>
<router-outlet></router-outlet>
11.
12.register.service.ts
SaveUser(empformdata:any)
{
debugger
return this.http.post("http://
localhost:3000/emp",empformdata);
}
13. register.component.ts
import { Component, OnInit } from '@angula
r/core';
import { RegisterService } from '../
register.service';
import { JsonPipe } from '@angular/
common';
@Component({
selector: 'app-register',
templateUrl: './
register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements
OnInit {
id:number;
ename:any;
salary:number;
emplist:any;
formdata:any;
constructor(private reg:RegisterService)
{ }
ngOnInit()
{
this.GetUser();
}
GetUser()
{
this.reg.GetUser().subscribe(res=>
{
this.emplist=res;
});
}
onSubmit()
{
debugger
this.formdata={id:this.id,ename:this.e
name,salary:this.salary};
this.reg.SaveUser(this.formdata).subsc
ribe(
res=>
{
this.GetUser();
}
);
}
}
14. register.component.html
Enter Eno
<input type="text" [(ngModel)]="id">
<br>
Enter Ename
<input type="text" [(ngModel)]="ename">
<br>
Enter Salary
<input type="text" [(ngModel)]="salary">
<br>
<input type="button" (click)="onSubmit()"
value="Save">
<br>
<table>
<tr>
<td>Eno</td>
<td>Ename</td>
<td>Salary</td>
</tr>
<tr *ngFor="let user of emplist">
<td>{{user.id }}</td>
<td>{{ user.ename}}</td>
<td>{{user.salary}}</td>
</tr>
</table>
15.
Register.service.ts:-
SearchEmpById(id:number)
{
return this.http.get("http://
localhost:3000/emp/"+id);
}
DeleteEmp(id:number)
{
return this.http.delete("http://
localhost:3000/emp/"+id);
}
updateuser(formdata:any)
{
debugger
return this.http.put("http://
localhost:3000/
emp/"+formdata.id,formdata);
}
Register.component.ts:-
GetEmpById(id)
{
this.reg.SearchEmpById(id).subscribe(r=>
{
debugger
this.empdata=r;
this.id=this.empdata.id;
this.ename=this.empdata.ename;
this.salary=this.empdata.salary;
});
}
DeleteEmp(id)
{
this.reg.DeleteEmp(id).subscribe(r=>
{
this.GetEmp();
});
}
OnUpdate()
{
debugger
this.formdata={id:this.id,ename:this.ena
me,salary:this.salary};
this.reg.updateuser(this.formdata).subsc
ribe(r=>
{
this.GetEmp();
});
}
Register.component.html:-
Enter Eno
<input type="text" [(ngModel)]="id">
<br>
Enter Ename
<input type="text" [(ngModel)]="ename">
<br>
Enter Salary
<input type="text" [(ngModel)]="salary">
<br>
<input type="button" (click)="OnSubmit()"
value="Register">
<input type="button" (click)="OnUpdate()"
value="Update">
<br>
<table>
<tr>
<td>Eno</td>
<td>Ename</td>
<td>Salary</td>
</tr>
<tr *ngFor="let user of emplist">
<td>{{user.id}}</td>
<td>{{user.ename}}</td>
<td>{{user.salary}}</td>
<td><input type="button" (click)="
GetEmpById(user.id)" value="Edit"></td>
<td><input type="button" (click)="
DeleteEmp(user.id)" value="delete"></td>
</tr>
</table>
