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
400
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
600
Dear performant app,
nishugoel
0
100
The Angular Router - TrivandrumTechCon20
nishugoel
4
240
Creating Libraries in Angular
nishugoel
0
200
ngIndia - HostBinding() and HostListener()
nishugoel
0
290
Other Decks in Technology
See All in Technology
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
510
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
310
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
解析の定理証明実践@Lean 4
dec9ue
0
180
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
170
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
AIのAIによるAIのための出力評価と改善
chocoyama
2
560
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.2k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
530
GitHub Copilot の概要
tomokusaba
1
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Balancing Empowerment & Direction
lara
1
370
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Scaling GitHub
holman
459
140k
The Invisible Side of Design
smashingmag
300
51k
Facilitating Awesome Meetings
lara
54
6.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building Adaptive Systems
keathley
43
2.6k
Six Lessons from altMBA
skipperchong
28
3.8k
Making Projects Easy
brettharned
116
6.3k
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!