Slide 1

Slide 1 text

CRUD Operations in Angular 7

Slide 2

Slide 2 text

Nishu Goel Software Engineer, IBM | Udemy Author | Angular Developer @DcoustaWilson Blog: https://nishugoel.wordpress.com HELLO!

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

CRUD?

Slide 5

Slide 5 text

Fake a back-end Server?

Slide 6

Slide 6 text

Three ways - Return data from local File - Use local JSON file - Use Angular-in-memory-web-api

Slide 7

Slide 7 text

Angular in-memory-web-api

Slide 8

Slide 8 text

AGENDA ❑ Getting the data from the in memory data store ❑ Reading this data ❑ Creating the data ❑ Updating the data ❑ Deleting the data

Slide 9

Slide 9 text

❑ 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) ] )

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Create Service ng generate service 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';

Slide 13

Slide 13 text

Read Operation Using http.get() method

Slide 14

Slide 14 text

getUsers(): Observable { return this.http.get(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; }); } }

Slide 15

Slide 15 text

Create Data Using http.post()

Slide 16

Slide 16 text

In the Service addUser (User: User): Observable { return this.http.post(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();

Slide 17

Slide 17 text

Update Data Using http.put()

Slide 18

Slide 18 text

In the Service updateUser (user: User): Observable { return this.http.put(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(); }); });

Slide 19

Slide 19 text

Delete Data Using http.delete()

Slide 20

Slide 20 text

In the Service deleteUser (id: number): Observable { const url = `${this.apiurl}/${id}`; return this.http.delete(url, this.httpOptions).pipe( catchError(this.handleError) ); } On the Component deleteUser() { this.dataservice.deleteUser(this.idtodelete).subscribe(data => { this.getUsers(); }); }

Slide 21

Slide 21 text

Stackblitz Demo https://stackblitz.com/github/NishuGoel/CRUDwithAngular Thank You!