Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CRUD operations in Angular 7
Search
Nishu Goel
April 20, 2019
Technology
1
410
CRUD operations in Angular 7
Learn how to perform create, read, update, and delete operations in Angular 7 with Routing.
Nishu Goel
April 20, 2019
Tweet
Share
More Decks by Nishu Goel
See All by Nishu Goel
Diagnosing INP & Breaking down long tasks
nishugoel
0
620
Dear performant app,
nishugoel
0
110
The Angular Router - TrivandrumTechCon20
nishugoel
4
250
Creating Libraries in Angular
nishugoel
0
200
ngIndia - HostBinding() and HostListener()
nishugoel
0
300
Other Decks in Technology
See All in Technology
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
7.2k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
260
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
730
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
サンドボックス技術でAI利活用を促進する
koh_naga
0
150
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
270
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
430
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
450
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
270
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
A better future with KSS
kneath
239
17k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Automating Front-end Workflow
addyosmani
1370
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Facilitating Awesome Meetings
lara
55
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
CRUD Operations in Angular 7
Nishu Goel Software Engineer, IBM | Udemy Author | Angular
Developer @DcoustaWilson Blog: https://nishugoel.wordpress.com HELLO!
GitHub Repository https://github.com/NishuGoel/CRUDwithAngular Blog post on Building a CRUD Application
with Angular https://www.c-sharpcorner.com/article/building-a-crud-application- with-angular/
CRUD?
Fake a back-end Server?
Three ways - Return data from local File - Use
local JSON file - Use Angular-in-memory-web-api
Angular in-memory-web-api
AGENDA ❑ Getting the data from the in memory data
store ❑ Reading this data ❑ Creating the data ❑ Updating the data ❑ Deleting the data
❑ Setting up the in-memory-web-api npm install angular-in-memory-web-api --save-dev ❑
Importing it in the module for the data class @NgModule({ imports: [ BrowserModule, InMemoryWebApiModule.forRoot(UserData) ] )
Using the in-memory-web-api ❑ Create the entity class export class
User { constructor ( public id = 0, public name= '', public model= 0, ) {}} createDb(){ } ❑ Providing the method to create data in the class
Data ready, Let’s perform HTTP operations! - Create Service -
Inject HttpClient service to perform the HTTP operations - Refer to the created API Perform Create, Read, Update, Delete
Create Service ng generate service <service-name> constructor(private http: HttpClient) {
} Inject http service apiurl = 'api/Users’; headers = new HttpHeaders().set('Content-Type', 'application/json').set('Accept', 'application/json'); httpOptions = { headers: this.headers }; Use the data Import required statements import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { tap, catchError, map } from 'rxjs/operators'; import { User } from './User';
Read Operation Using http.get() method
getUsers(): Observable<User[]> { return this.http.get<User[]>(this.apiurl).pipe( tap(data => console.log(data)), catchError(this.handleError) );
} In the service In the Component Users: User[] = []; constructor(private dataservice: DataService) { } ngOnInit() { this.getUsers(); } getUsers() { this.dataservice.getUsers().subscribe(data => { this.Users = data; }); } }
Create Data Using http.post()
In the Service addUser (User: User): Observable<User> { return this.http.post<User>(this.apiurl,
User, this.httpOptions).pipe( tap(data => console.log(data)), catchError(this.handleError) ); } On the Component addUser() { this.dataservice.addUser(this.UserFormGroup.val ue).subscribe(data => { this.User = data; console.log(this.User); }); this.getUsers();
Update Data Using http.put()
In the Service updateUser (user: User): Observable<null | User> {
return this.http.put<User>(this.apiurl, User, this.httpOptions).pipe( tap(data => console.log(data)), catchError(this.handleError) ); } On the Component updateUser() { this.dataservice.getUser(this.idtoupdate).subscribe(data => { this.UserToUpdate = data; this.UserToUpdate.model = 'updated model'; this.dataservice.updateUser(this.UserToUpdate).subscribe(data1 => { this.getUsers(); }); });
Delete Data Using http.delete()
In the Service deleteUser (id: number): Observable<User> { const url
= `${this.apiurl}/${id}`; return this.http.delete<User>(url, this.httpOptions).pipe( catchError(this.handleError) ); } On the Component deleteUser() { this.dataservice.deleteUser(this.idtodelete).subscribe(data => { this.getUsers(); }); }
Stackblitz Demo https://stackblitz.com/github/NishuGoel/CRUDwithAngular Thank You!