Angular pipes, a way to write display-value transformations that you can declare in your HTML. The async pipe is a special built in pipe from Angular that will subscribe to an observable for you in the HTML template and also unsubscribe when the components ngOnDestory life cycle hook is fired. Another quirk is that it will also mark the component to be checked by Angular's change detection on its next cycle.
Use async pipe versus a subscription to get the attendees from the observable.
Angular's own HttpClientInMemoryWebApiModule can help us make a little mock server without needing to add a real server set up. You can read more about how it works here https://github.com/angular/in-memory-web-api.
Add fake backend with with npm.
npm i angular-in-memory-web-api -D
Add HttpClientModule
Add the HttpClientInMemoryWebApiModule to the imports array of the @ngModule and register the InMemoryDataService we will write in the next step.
Create the missing InMemoryDataService in the src/app folder. Do not worry too much about learning how this works we just need a little fake backend so we can focus on understanding Angular and NgRx.
src/app/app.db.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Attendee } from './models';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const attendees = [
{
id: 1,
name: 'Duncan In Memory',
attending: true,
guests: 0
}
] as Attendee[];
return { attendees };
}
}
8. Update Attendee interface to have an optional Id
Add optional id to Attendee interface with a id?: number syntax.
Angular modules describe the dependencies for this section of code so we will need to also add the HttpClientModule here to. The build tool is smart enough to know we registered it in the root module so we will not pay for it twice in the browser bundled JavaScript.
Add HttpClientModule to the EventModule.
src/app/event/event.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { EventComponent } from './containers/event/event.component';
import { AddAttendeeComponent } from './components/add-attendee/add-attendee.component';
import { EventListComponent } from './components/event-list/event-list.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([{ path: '', component: EventComponent }]),
ReactiveFormsModule,
HttpClientModule
],
declarations: [EventComponent, AddAttendeeComponent, EventListComponent]
})
export class EventModule {}
10. Update service to call fake endpoint
Update the service by injecting the httpClient into the constructor.
Change the getAttendee method to use the httpClient and fake backend.
Add an addAttendee method to save the added attendees.
src/app/event/event.service.ts
import { Injectable } from '@angular/core';
import { Attendee } from '../../models';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class EventService {
constructor(private httpClient: HttpClient) {}
getAttendees(): Observable<Attendee[]> {
return this.httpClient.get<Attendee[]>('/api/attendees');
}
addAttendee(attendee: Attendee): Observable<Attendee> {
return this.httpClient.post<Attendee>('/api/attendees', attendee);
}
}
12. Update container component to have an add attendee method
Add new method to call addAttendee on the service and then call getAttendees after it saves.