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
330
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
540
Dear performant app,
nishugoel
0
96
The Angular Router - TrivandrumTechCon20
nishugoel
4
190
Creating Libraries in Angular
nishugoel
0
190
ngIndia - HostBinding() and HostListener()
nishugoel
0
230
Other Decks in Technology
See All in Technology
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
AGIについてChatGPTに聞いてみた
blueb
0
130
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
170
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Thoughts on Productivity
jonyablonski
67
4.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Producing Creativity
orderedlist
PRO
341
39k
Writing Fast Ruby
sferik
627
61k
Gamification - CAS2011
davidbonilla
80
5k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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!