CRUD operation in Angular
Angular is a web application framework of typescript which is used to make Single Page Interface. Angular is one of the most popular framework for the web developer.
Creating a new App
Hope you have installed the node if not not worries you can download it through here.
After node has been installed in your computer you have to install angular cli from command prompt or terminal .You can install it by using the following command.
npm install -g @angular/cli
Yeah, One Step Closer To The Goal
Creating a New App:
You don’t have to create the app from the scratch. Rather you can change from whatever is there so that both time and resources is used less. You can create app by using the following command.
ng new my-app
Great there you go. In place of app-name we have latter made Restaurant-App. This is just the name so make changes as you wish.
You can now run the application with the help of following command.
ng serve
We can see our changes in localhost:4200.
Components, What actually is this:
Components are the building blocks of application in angular. Here, we divide each and every big blocks of UI into many components which could be used in future also. This definitely reduce the time to write the code which is very effective in creating a web based application.
To create a components in angular, we can simply write the following command in the terminal.
ng g c component-name
CRUD Operation In Angular
Now, lets go to our main goal i.e. to make the CRUD operation. After creating components and in that components you have done html and done the styling. You have to make operations so that the users can interact to the web page and in the same time can add, read, change and delete the details provided by them.
We can create the new post by following code. Here, we first created the component named Restaurant-Dash. After that, we done the HTML part and the CSS part which you can do it by yourself. After that make sure you make a service which can be made by using following code.
ng g s service-name
So how will the folder looks likes???
Here, service-name is api which you could name any. To make sure your that it is is new folder we have placed in new folder named shared which you can make any.
Now let’s do some code.
I hope you know how to make form in HTML. In my form I have add some of the fields like email, address, mobile and service and we have used Form Builder as well to bind the form. After writing this you can …
Write this code in component in my case it is Restaurant-Dash in .ts file.
addRestro(){
this.restaurantModelObject.name=this.formValue.value.name
this.restaurantModelObject.email=this.formValue.value.email
this.restaurantModelObject.address=this.formValue.value.address
this.restaurantModelObject.mobile=this.formValue.value.mobile
this.restaurantModelObject.service=this.formValue.value.service
this.api.postRestaurant(this.restaurantModelObject).subscribe(res=>{
alert(“This is added successfully”)
this.formValue.reset()
this.getAllData() //to show the data as soon as ok is clicked
}
And write this in your service.ts in my case it is api.service.ts. Import the HttpClient. Also initialize in constructor.
postRestaurant(data:any){
return this._http.post<any>(“http://localhost:3000/posts",data).pipe(map((res:any)=>{return res}))
}
Here we have fetch the data from localhost for that we have used HttpClient Module.
Hence, Create is completed.
Similarly for rest of the operation we can do this by:
getAllData(){
this.api.getRestaurant().subscribe(res=>{return this.allRestaurant=res})}
deleteRestro(data:any){this.api.deleteRestaurant(data.id).subscribe(res=>{
alert(“delete”)
this.getAllData()})}
editRestro(data:any){
this.showAdd=false;
this.showBtn=true;
this.restaurantModelObject.id=data.id
this.formValue.controls[‘name’].setValue(data.name)
this.formValue.controls[‘email’].setValue(data.email)
this.formValue.controls[‘address’].setValue(data.address)
this.formValue.controls[‘mobile’].setValue(data.mobile)
this.formValue.controls[‘service’].setValue(data.service)
}
updateRestro(){
this.restaurantModelObject.name=this.formValue.value.name
this.restaurantModelObject.email=this.formValue.value.email
this.restaurantModelObject.address=this.formValue.value.address
this.restaurantModelObject.mobile=this.formValue.value.mobile
this.restaurantModelObject.service=this.formValue.value.service
this.api.updateRestaurant(this.restaurantModelObject,this.restaurantModelObject.id).subscribe(res=>{
alert(“Update successfull”)
this.formValue.reset()
this.getAllData()})}
In service.ts place this.
getRestaurant(){return this._http.get<any>(“http://localhost:3000/posts").pipe(map((res:any)=>{return res}))}
updateRestaurant(data:any,id:number){return this._http.put<any>(“http://localhost:3000/posts/"+id,data).pipe(map((res:any)=>{return res}))}
deleteRestaurant(id:number){return this._http.delete<any>(“http://localhost:3000/posts/"+id).pipe(map((res:any)=>{return res}))}
Well Done!!! You have made the CRUD application to interact to the user.
Thank You.
