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
420
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
630
Dear performant app,
nishugoel
0
110
The Angular Router - TrivandrumTechCon20
nishugoel
4
260
Creating Libraries in Angular
nishugoel
0
200
ngIndia - HostBinding() and HostListener()
nishugoel
0
310
Other Decks in Technology
See All in Technology
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
incident_commander_demaecan__1_.pdf
demaecan
0
140
Node.js 2025: What's new and what's next
ruyadorno
0
340
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
390
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
520
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.6k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
3
1.9k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
250
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
300
Featured
See All Featured
Designing for Performance
lara
610
69k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The World Runs on Bad Software
bkeepers
PRO
72
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to Ace a Technical Interview
jacobian
280
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Thoughts on Productivity
jonyablonski
70
4.9k
Bash Introduction
62gerente
615
210k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
How GitHub (no longer) Works
holman
315
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!