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
610
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
290
Other Decks in Technology
See All in Technology
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
640
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
370
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.4k
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
220
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.2k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
180
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
270
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
200
Building GoReleaser - from shell script to paid product
caarlos0
0
220
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
2
870
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
940
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
BBQ
matthewcrist
89
9.7k
A designer walks into a library…
pauljervisheath
207
24k
Being A Developer After 40
akosma
90
590k
GraphQLとの向き合い方2022年版
quramy
49
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Speed Design
sergeychernyshev
32
1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Git: the NoSQL Database
bkeepers
PRO
431
65k
A better future with KSS
kneath
238
17k
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!