5 lines
66 KiB
JSON
5 lines
66 KiB
JSON
{
|
|
"id": "tutorial/toh-pt6",
|
|
"title": "Get data from a server",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt6.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"get-data-from-a-server\">Get data from a server<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#get-data-from-a-server\"><i class=\"material-icons\">link</i></a></h1>\n<p>In this tutorial, you'll add the following data persistence features with help from\nAngular's <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>.</p>\n<ul>\n<li>The <code>HeroService</code> gets hero data with HTTP requests.</li>\n<li>Users can add, edit, and delete heroes and save these changes over HTTP.</li>\n<li>Users can search for heroes by name.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p> For the sample application that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"enable-http-services\">Enable HTTP services<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#enable-http-services\"><i class=\"material-icons\">link</i></a></h2>\n<p><code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> is Angular's mechanism for communicating with a remote server over HTTP.</p>\n<p>Make <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> available everywhere in the application in two steps. First, add it to the root <code>AppModule</code> by importing it:</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" region=\"import-http-client\" header=\"src/app/app.module.ts (HttpClientModule import)\">\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n</code-example>\n<p>Next, still in the <code>AppModule</code>, add <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> to the <code>imports</code> array:</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" region=\"import-httpclientmodule\" header=\"src/app/app.module.ts (imports array excerpt)\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n ],\n})\n\n</code-example>\n<h2 id=\"simulate-a-data-server\">Simulate a data server<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#simulate-a-data-server\"><i class=\"material-icons\">link</i></a></h2>\n<p>This tutorial sample mimics communication with a remote data server by using the\n<a href=\"https://github.com/angular/angular/tree/master/packages/misc/angular-in-memory-web-api\" title=\"In-memory Web API\">In-memory Web API</a> module.</p>\n<p>After installing the module, the application will make requests to and receive responses from the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>\nwithout knowing that the <em>In-memory Web API</em> is intercepting those requests,\napplying them to an in-memory data store, and returning simulated responses.</p>\n<p>By using the In-memory Web API, you won't have to set up a server to learn about <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>.</p>\n<div class=\"alert is-important\">\n<p><strong>Important:</strong> the In-memory Web API module has nothing to do with HTTP in Angular.</p>\n<p>If you're just reading this tutorial to learn about <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code>, you can <a href=\"tutorial/toh-pt6#import-heroes\">skip over</a> this step.\nIf you're coding along with this tutorial, stay here and add the In-memory Web API now.</p>\n</div>\n<p>Install the In-memory Web API package from npm with the following command:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n npm install angular-in-memory-web-api --save\n</code-example>\n<p>In the <code>AppModule</code>, import the <code>HttpClientInMemoryWebApiModule</code> and the <code>InMemoryDataService</code> class,\nwhich you will create in a moment.</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" region=\"import-in-mem-stuff\" header=\"src/app/app.module.ts (In-memory Web API imports)\">\nimport { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';\nimport { InMemoryDataService } from './in-memory-data.service';\n\n</code-example>\n<p>After the <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>, add the <code>HttpClientInMemoryWebApiModule</code>\nto the <code>AppModule</code> <code>imports</code> array and configure it with the <code>InMemoryDataService</code>.</p>\n<code-example path=\"toh-pt6/src/app/app.module.ts\" header=\"src/app/app.module.ts (imports array excerpt)\" region=\"in-mem-web-api-imports\">\n<a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n\n// The HttpClientInMemoryWebApiModule module intercepts HTTP requests\n// and returns simulated server responses.\n// Remove it when a real server is ready to receive requests.\nHttpClientInMemoryWebApiModule.forRoot(\n InMemoryDataService, { dataEncapsulation: false }\n)\n\n</code-example>\n<p>The <code>forRoot()</code> configuration method takes an <code>InMemoryDataService</code> class\nthat primes the in-memory database.</p>\n<p>Generate the class <code>src/app/in-memory-data.service.ts</code> with the following command:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate service InMemoryData\n</code-example>\n<p>Replace the default contents of <code>in-memory-data.service.ts</code> with the following:</p>\n<code-example path=\"toh-pt6/src/app/in-memory-data.service.ts\" region=\"init\" header=\"src/app/in-memory-data.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { InMemoryDbService } from 'angular-in-memory-web-api';\nimport { Hero } from './hero';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n providedIn: 'root',\n})\nexport class InMemoryDataService implements InMemoryDbService {\n createDb() {\n const heroes = [\n { id: 11, name: 'Dr Nice' },\n { id: 12, name: 'Narco' },\n { id: 13, name: 'Bombasto' },\n { id: 14, name: 'Celeritas' },\n { id: 15, name: 'Magneta' },\n { id: 16, name: 'RubberMan' },\n { id: 17, name: 'Dynama' },\n { id: 18, name: 'Dr IQ' },\n { id: 19, name: 'Magma' },\n { id: 20, name: 'Tornado' }\n ];\n return {heroes};\n }\n\n // Overrides the genId method to ensure that a hero always has an id.\n // If the heroes array is empty,\n // the method below returns the initial number (11).\n // if the heroes array is not empty, the method below returns the highest\n // hero id + 1.\n genId(heroes: Hero[]): number {\n return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;\n }\n}\n\n\n</code-example>\n<p>The <code>in-memory-data.service.ts</code> file will take over the function of <code>mock-heroes.ts</code>.\nHowever, don't delete <code>mock-heroes.ts</code> yet, as you still need it for a few more steps of this tutorial.</p>\n<p>When the server is ready, you'll detach the In-memory Web API, and the app's requests will go through to the server.</p>\n<a id=\"import-heroes\"></a>\n<h2 id=\"heroes-and-http\">Heroes and HTTP<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#heroes-and-http\"><i class=\"material-icons\">link</i></a></h2>\n<p>In the <code>HeroService</code>, import <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> and <code><a href=\"api/common/http/HttpHeaders\" class=\"code-anchor\">HttpHeaders</a></code>:</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"import-httpclient\" header=\"src/app/hero.service.ts (import HTTP symbols)\">\nimport { <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>, <a href=\"api/common/http/HttpHeaders\" class=\"code-anchor\">HttpHeaders</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n</code-example>\n<p>Still in the <code>HeroService</code>, inject <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> into the constructor in a private property called <code><a href=\"api/common/http\" class=\"code-anchor\">http</a></code>.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"ctor\">\nconstructor(\n private <a href=\"api/common/http\" class=\"code-anchor\">http</a>: <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>,\n private messageService: MessageService) { }\n\n</code-example>\n<p>Notice that you keep injecting the <code>MessageService</code> but since you'll call it so frequently, wrap it in a private <code>log()</code> method:</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"log\">\n/** Log a HeroService message with the MessageService */\nprivate log(message: string) {\n this.messageService.add(`HeroService: ${message}`);\n}\n\n</code-example>\n<p>Define the <code>heroesUrl</code> of the form <code>:base/:collectionName</code> with the address of the heroes resource on the server.\nHere <code>base</code> is the resource to which requests are made,\nand <code>collectionName</code> is the heroes data object in the <code>in-memory-data-service.ts</code>.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"heroesUrl\">\nprivate heroesUrl = 'api/heroes'; // URL to web api\n\n</code-example>\n<h3 id=\"get-heroes-with-httpclient\">Get heroes with <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#get-heroes-with-httpclient\"><i class=\"material-icons\">link</i></a></h3>\n<p>The current <code>HeroService.getHeroes()</code>\nuses the RxJS <code>of()</code> function to return an array of mock heroes\nas an <code>Observable<Hero[]></code>.</p>\n<code-example path=\"toh-pt4/src/app/hero.service.ts\" region=\"getHeroes-1\" header=\"src/app/hero.service.ts (getHeroes with RxJs 'of()')\">\ngetHeroes(): Observable<Hero[]> {\n const heroes = of(HEROES);\n return heroes;\n}\n\n</code-example>\n<p>Convert that method to use <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> as follows:</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"getHeroes-1\">\n/** GET heroes from the server */\ngetHeroes(): Observable<Hero[]> {\n return this.http.get<Hero[]>(this.heroesUrl)\n}\n\n</code-example>\n<p>Refresh the browser. The hero data should successfully load from the\nmock server.</p>\n<p>You've swapped <code>of()</code> for <code>http.get()</code> and the application keeps working without any other changes\nbecause both functions return an <code>Observable<Hero[]></code>.</p>\n<h3 id=\"httpclient-methods-return-one-value\"><code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> methods return one value<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#httpclient-methods-return-one-value\"><i class=\"material-icons\">link</i></a></h3>\n<p>All <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> methods return an RxJS <code>Observable</code> of something.</p>\n<p>HTTP is a request/response protocol.\nYou make a request, it returns a single response.</p>\n<p>In general, an observable <em>can</em> return multiple values over time.\nAn observable from <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> always emits a single value and then completes, never to emit again.</p>\n<p>This particular <code><a href=\"api/common/http/HttpClient#get\" class=\"code-anchor\">HttpClient.get()</a></code> call returns an <code>Observable<Hero[]></code>; that is, \"<em>an observable of hero arrays</em>\". In practice, it will only return a single hero array.</p>\n<h3 id=\"httpclientget-returns-response-data\"><code><a href=\"api/common/http/HttpClient#get\" class=\"code-anchor\">HttpClient.get()</a></code> returns response data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#httpclientget-returns-response-data\"><i class=\"material-icons\">link</i></a></h3>\n<p><code><a href=\"api/common/http/HttpClient#get\" class=\"code-anchor\">HttpClient.get()</a></code> returns the body of the response as an untyped JSON object by default.\nApplying the optional type specifier, <code><Hero[]></code> , adds TypeScript capabilities, which reduce errors during compile time.</p>\n<p>The server's data API determines the shape of the JSON data.\nThe <em>Tour of Heroes</em> data API returns the hero data as an array.</p>\n<div class=\"alert is-helpful\">\n<p>Other APIs may bury the data that you want within an object.\nYou might have to dig that data out by processing the <code>Observable</code> result\nwith the RxJS <code>map()</code> operator.</p>\n<p>Although not discussed here, there's an example of <code>map()</code> in the <code>getHeroNo404()</code>\nmethod included in the sample source code.</p>\n</div>\n<h3 id=\"error-handling\">Error handling<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#error-handling\"><i class=\"material-icons\">link</i></a></h3>\n<p>Things go wrong, especially when you're getting data from a remote server.\nThe <code>HeroService.getHeroes()</code> method should catch errors and do something appropriate.</p>\n<p>To catch errors, you <strong>\"pipe\" the observable</strong> result from <code>http.get()</code> through an RxJS <code>catchError()</code> operator.</p>\n<p>Import the <code>catchError</code> symbol from <code>rxjs/operators</code>, along with some other operators you'll need later.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"import-rxjs-operators\">\nimport { catchError, map, tap } from 'rxjs/operators';\n\n</code-example>\n<p>Now extend the observable result with the <code>pipe()</code> method and\ngive it a <code>catchError()</code> operator.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"getHeroes-2\" header=\"src/app/hero.service.ts\">\ngetHeroes(): Observable<Hero[]> {\n return this.http.get<Hero[]>(this.heroesUrl)\n .pipe(\n catchError(this.handleError<Hero[]>('getHeroes', []))\n );\n}\n\n</code-example>\n<p>The <code>catchError()</code> operator intercepts an <strong><code>Observable</code> that failed</strong>.\nThe operator then passes the error to the error handling function.</p>\n<p>The following <code>handleError()</code> method reports the error and then returns an\ninnocuous result so that the application keeps working.</p>\n<h4 id=\"handleerror\"><code>handleError</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#handleerror\"><i class=\"material-icons\">link</i></a></h4>\n<p>The following <code>handleError()</code> will be shared by many <code>HeroService</code> methods\nso it's generalized to meet their different needs.</p>\n<p>Instead of handling the error directly, it returns an error handler function to <code>catchError</code> that it\nhas configured with both the name of the operation that failed and a safe return value.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"handleError\">\n/**\n * Handle Http operation that failed.\n * Let the app continue.\n * @param operation - name of the operation that failed\n * @param result - optional value to return as the observable result\n */\nprivate handleError<T>(operation = 'operation', result?: T) {\n return (error: any): Observable<T> => {\n\n // TODO: send the error to remote logging infrastructure\n console.error(error); // log to console instead\n\n // TODO: better job of transforming error for user consumption\n this.log(`${operation} failed: ${error.message}`);\n\n // Let the app keep running by returning an empty result.\n return of(result as T);\n };\n}\n\n</code-example>\n<p>After reporting the error to the console, the handler constructs\na user friendly message and returns a safe value to the application so the application can keep working.</p>\n<p>Because each service method returns a different kind of <code>Observable</code> result,\n<code>handleError()</code> takes a type parameter so it can return the safe value as the type that the application expects.</p>\n<h3 id=\"tap-into-the-observable\">Tap into the Observable<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#tap-into-the-observable\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code>HeroService</code> methods will <strong>tap</strong> into the flow of observable values\nand send a message, via the <code>log()</code> method, to the message area at the bottom of the page.</p>\n<p>They'll do that with the RxJS <code>tap()</code> operator,\nwhich looks at the observable values, does something with those values,\nand passes them along.\nThe <code>tap()</code> call back doesn't touch the values themselves.</p>\n<p>Here is the final version of <code>getHeroes()</code> with the <code>tap()</code> that logs the operation.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" header=\"src/app/hero.service.ts\" region=\"getHeroes\">\n/** GET heroes from the server */\ngetHeroes(): Observable<Hero[]> {\n return this.http.get<Hero[]>(this.heroesUrl)\n .pipe(\n tap(_ => this.log('fetched heroes')),\n catchError(this.handleError<Hero[]>('getHeroes', []))\n );\n}\n\n</code-example>\n<h3 id=\"get-hero-by-id\">Get hero by id<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#get-hero-by-id\"><i class=\"material-icons\">link</i></a></h3>\n<p>Most web APIs support a <em>get by id</em> request in the form <code>:baseURL/:id</code>.</p>\n<p>Here, the <em>base URL</em> is the <code>heroesURL</code> defined in the <a href=\"tutorial/toh-pt6#heroes-and-http\">Heroes and HTTP</a> section (<code>api/heroes</code>) and <em>id</em> is\nthe number of the hero that you want to retrieve. For example, <code>api/heroes/11</code>.</p>\n<p>Update the <code>HeroService</code> <code>getHero()</code> method with the following to make that request:</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"getHero\" header=\"src/app/hero.service.ts\">\n/** GET hero by id. Will 404 if id not found */\ngetHero(id: number): Observable<Hero> {\n const url = `${this.heroesUrl}/${id}`;\n return this.http.get<Hero>(url).pipe(\n tap(_ => this.log(`fetched hero id=${id}`)),\n catchError(this.handleError<Hero>(`getHero id=${id}`))\n );\n}\n\n</code-example>\n<p>There are three significant differences from <code>getHeroes()</code>:</p>\n<ul>\n<li><code>getHero()</code> constructs a request URL with the desired hero's id.</li>\n<li>The server should respond with a single hero rather than an array of heroes.</li>\n<li><code>getHero()</code> returns an <code>Observable<Hero></code> (\"<em>an observable of Hero objects</em>\")\nrather than an observable of hero <em>arrays</em> .</li>\n</ul>\n<h2 id=\"update-heroes\">Update heroes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#update-heroes\"><i class=\"material-icons\">link</i></a></h2>\n<p>Edit a hero's name in the hero detail view.\nAs you type, the hero name updates the heading at the top of the page.\nBut when you click the \"go back button\", the changes are lost.</p>\n<p>If you want changes to persist, you must write them back to\nthe server.</p>\n<p>At the end of the hero detail template, add a save button with a <code>click</code> event\nbinding that invokes a new component method named <code>save()</code>.</p>\n<code-example path=\"toh-pt6/src/app/hero-detail/hero-detail.component.html\" region=\"save\" header=\"src/app/hero-detail/hero-detail.component.html (save)\">\n<button (click)=\"save()\">save</button>\n\n</code-example>\n<p>In the <code>HeroDetail</code> component class, add the following <code>save()</code> method, which persists hero name changes using the hero service\n<code>updateHero()</code> method and then navigates back to the previous view.</p>\n<code-example path=\"toh-pt6/src/app/hero-detail/hero-detail.component.ts\" region=\"save\" header=\"src/app/hero-detail/hero-detail.component.ts (save)\">\nsave(): void {\n this.heroService.updateHero(this.hero)\n .subscribe(() => this.goBack());\n}\n\n</code-example>\n<h4 id=\"add-heroserviceupdatehero\">Add <code>HeroService.updateHero()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#add-heroserviceupdatehero\"><i class=\"material-icons\">link</i></a></h4>\n<p>The overall structure of the <code>updateHero()</code> method is similar to that of\n<code>getHeroes()</code>, but it uses <code>http.put()</code> to persist the changed hero\non the server. Add the following to the <code>HeroService</code>.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"updateHero\" header=\"src/app/hero.service.ts (update)\">\n/** PUT: update the hero on the server */\nupdateHero(hero: Hero): Observable<any> {\n return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(\n tap(_ => this.log(`updated hero id=${hero.id}`)),\n catchError(this.handleError<any>('updateHero'))\n );\n}\n\n</code-example>\n<p>The <code><a href=\"api/common/http/HttpClient#put\" class=\"code-anchor\">HttpClient.put()</a></code> method takes three parameters:</p>\n<ul>\n<li>the URL</li>\n<li>the data to update (the modified hero in this case)</li>\n<li>options</li>\n</ul>\n<p>The URL is unchanged. The heroes web API knows which hero to update by looking at the hero's <code>id</code>.</p>\n<p>The heroes web API expects a special header in HTTP save requests.\nThat header is in the <code>httpOptions</code> constant defined in the <code>HeroService</code>. Add the following to the <code>HeroService</code> class.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"http-options\" header=\"src/app/hero.service.ts\">\nhttpOptions = {\n headers: new <a href=\"api/common/http/HttpHeaders\" class=\"code-anchor\">HttpHeaders</a>({ 'Content-Type': 'application/json' })\n};\n\n</code-example>\n<p>Refresh the browser, change a hero name and save your change. The <code>save()</code>\nmethod in <code>HeroDetailComponent</code> navigates to the previous view.\nThe hero now appears in the list with the changed name.</p>\n<h2 id=\"add-a-new-hero\">Add a new hero<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#add-a-new-hero\"><i class=\"material-icons\">link</i></a></h2>\n<p>To add a hero, this application only needs the hero's name. You can use an <code><input></code>\nelement paired with an add button.</p>\n<p>Insert the following into the <code>HeroesComponent</code> template, just after\nthe heading:</p>\n<code-example path=\"toh-pt6/src/app/heroes/heroes.component.html\" region=\"add\" header=\"src/app/heroes/heroes.component.html (add)\">\n<div>\n <label id=\"new-hero\">Hero name: </label>\n <input for=\"new-hero\" #heroName />\n\n <!-- (click) passes input value to add() and then clears the input -->\n <button class=\"add-button\" (click)=\"add(heroName.value); heroName.value=''\">\n Add hero\n </button>\n</div>\n\n</code-example>\n<p>In response to a click event, call the component's click handler, <code>add()</code>, and then\nclear the input field so that it's ready for another name. Add the following to the\n<code>HeroesComponent</code> class:</p>\n<code-example path=\"toh-pt6/src/app/heroes/heroes.component.ts\" region=\"add\" header=\"src/app/heroes/heroes.component.ts (add)\">\nadd(name: string): void {\n name = name.trim();\n if (!name) { return; }\n this.heroService.addHero({ name } as Hero)\n .subscribe(hero => {\n this.heroes.push(hero);\n });\n}\n\n</code-example>\n<p>When the given name is non-blank, the handler creates a <code>Hero</code>-like object\nfrom the name (it's only missing the <code>id</code>) and passes it to the services <code>addHero()</code> method.</p>\n<p>When <code>addHero()</code> saves successfully, the <code>subscribe()</code> callback\nreceives the new hero and pushes it into to the <code>heroes</code> list for display.</p>\n<p>Add the following <code>addHero()</code> method to the <code>HeroService</code> class.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"addHero\" header=\"src/app/hero.service.ts (addHero)\">\n/** POST: add a new hero to the server */\naddHero(hero: Hero): Observable<Hero> {\n return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(\n tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),\n catchError(this.handleError<Hero>('addHero'))\n );\n}\n\n</code-example>\n<p><code>addHero()</code> differs from <code>updateHero()</code> in two ways:</p>\n<ul>\n<li>It calls <code><a href=\"api/common/http/HttpClient#post\" class=\"code-anchor\">HttpClient.post()</a></code> instead of <code>put()</code>.</li>\n<li>It expects the server to generate an id for the new hero,\nwhich it returns in the <code>Observable<Hero></code> to the caller.</li>\n</ul>\n<p>Refresh the browser and add some heroes.</p>\n<h2 id=\"delete-a-hero\">Delete a hero<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#delete-a-hero\"><i class=\"material-icons\">link</i></a></h2>\n<p>Each hero in the heroes list should have a delete button.</p>\n<p>Add the following button element to the <code>HeroesComponent</code> template, after the hero\nname in the repeated <code><li></code> element.</p>\n<code-example path=\"toh-pt6/src/app/heroes/heroes.component.html\" header=\"src/app/heroes/heroes.component.html\" region=\"delete\">\n<button class=\"delete\" title=\"delete hero\"\n (click)=\"delete(hero)\">x</button>\n\n</code-example>\n<p>The HTML for the list of heroes should look like this:</p>\n<code-example path=\"toh-pt6/src/app/heroes/heroes.component.html\" region=\"list\" header=\"src/app/heroes/heroes.component.html (list of heroes)\">\n<ul class=\"heroes\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\">\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n <span class=\"badge\">{{hero.id}}</span> {{hero.name}}\n </a>\n <button class=\"delete\" title=\"delete hero\"\n (click)=\"delete(hero)\">x</button>\n </li>\n</ul>\n\n</code-example>\n<p>To position the delete button at the far right of the hero entry,\nadd some CSS to the <code>heroes.component.css</code>. You'll find that CSS\nin the <a href=\"tutorial/toh-pt6#heroescomponent\">final review code</a> below.</p>\n<p>Add the <code>delete()</code> handler to the component class.</p>\n<code-example path=\"toh-pt6/src/app/heroes/heroes.component.ts\" region=\"delete\" header=\"src/app/heroes/heroes.component.ts (delete)\">\ndelete(hero: Hero): void {\n this.heroes = this.heroes.filter(h => h !== hero);\n this.heroService.deleteHero(hero.id).subscribe();\n}\n\n</code-example>\n<p>Although the component delegates hero deletion to the <code>HeroService</code>,\nit remains responsible for updating its own list of heroes.\nThe component's <code>delete()</code> method immediately removes the <em>hero-to-delete</em> from that list,\nanticipating that the <code>HeroService</code> will succeed on the server.</p>\n<p>There's really nothing for the component to do with the <code>Observable</code> returned by\n<code>heroService.delete()</code> <strong>but it must subscribe anyway</strong>.</p>\n<div class=\"alert is-important\">\n<p> If you neglect to <code>subscribe()</code>, the service will not send the delete request to the server.\nAs a rule, an <code>Observable</code> <em>does nothing</em> until something subscribes.</p>\n<p> Confirm this for yourself by temporarily removing the <code>subscribe()</code>,\nclicking \"Dashboard\", then clicking \"Heroes\".\nYou'll see the full list of heroes again.</p>\n</div>\n<p>Next, add a <code>deleteHero()</code> method to <code>HeroService</code> like this.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"deleteHero\" header=\"src/app/hero.service.ts (delete)\">\n/** DELETE: delete the hero from the server */\ndeleteHero(id: number): Observable<Hero> {\n const url = `${this.heroesUrl}/${id}`;\n\n return this.http.delete<Hero>(url, this.httpOptions).pipe(\n tap(_ => this.log(`deleted hero id=${id}`)),\n catchError(this.handleError<Hero>('deleteHero'))\n );\n}\n\n</code-example>\n<p>Note the following key points:</p>\n<ul>\n<li><code>deleteHero()</code> calls <code><a href=\"api/common/http/HttpClient#delete\" class=\"code-anchor\">HttpClient.delete()</a></code>.</li>\n<li>The URL is the heroes resource URL plus the <code>id</code> of the hero to delete.</li>\n<li>You don't send data as you did with <code>put()</code> and <code>post()</code>.</li>\n<li>You still send the <code>httpOptions</code>.</li>\n</ul>\n<p>Refresh the browser and try the new delete functionality.</p>\n<h2 id=\"search-by-name\">Search by name<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#search-by-name\"><i class=\"material-icons\">link</i></a></h2>\n<p>In this last exercise, you learn to chain <code>Observable</code> operators together\nso you can minimize the number of similar HTTP requests\nand consume network bandwidth economically.</p>\n<p>You will add a heroes search feature to the Dashboard.\nAs the user types a name into a search box,\nyou'll make repeated HTTP requests for heroes filtered by that name.\nYour goal is to issue only as many requests as necessary.</p>\n<h4 id=\"heroservicesearchheroes\"><code>HeroService.searchHeroes()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#heroservicesearchheroes\"><i class=\"material-icons\">link</i></a></h4>\n<p>Start by adding a <code>searchHeroes()</code> method to the <code>HeroService</code>.</p>\n<code-example path=\"toh-pt6/src/app/hero.service.ts\" region=\"searchHeroes\" header=\"src/app/hero.service.ts\">\n/* GET heroes whose name contains search term */\nsearchHeroes(term: string): Observable<Hero[]> {\n if (!term.trim()) {\n // if not search term, return empty hero array.\n return of([]);\n }\n return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(\n tap(x => x.length ?\n this.log(`found heroes matching \"${term}\"`) :\n this.log(`no heroes matching \"${term}\"`)),\n catchError(this.handleError<Hero[]>('searchHeroes', []))\n );\n}\n\n</code-example>\n<p>The method returns immediately with an empty array if there is no search term.\nThe rest of it closely resembles <code>getHeroes()</code>, the only significant difference being\nthe URL, which includes a query string with the search term.</p>\n<h3 id=\"add-search-to-the-dashboard\">Add search to the Dashboard<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#add-search-to-the-dashboard\"><i class=\"material-icons\">link</i></a></h3>\n<p>Open the <code>DashboardComponent</code> template and\nadd the hero search element, <code><app-hero-search></code>, to the bottom of the markup.</p>\n<code-example path=\"toh-pt6/src/app/dashboard/dashboard.component.html\" header=\"src/app/dashboard/dashboard.component.html\">\n<h2>Top Heroes</h2>\n<div class=\"heroes-menu\">\n <a *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\"\n <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n {{hero.name}}\n </a>\n</div>\n\n<app-hero-search></app-hero-search>\n\n\n</code-example>\n<p>This template looks a lot like the <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> repeater in the <code>HeroesComponent</code> template.</p>\n<p>For this to work, the next step is to add a component with a selector that matches <code><app-hero-search></code>.</p>\n<h3 id=\"create-herosearchcomponent\">Create <code>HeroSearchComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#create-herosearchcomponent\"><i class=\"material-icons\">link</i></a></h3>\n<p>Create a <code>HeroSearchComponent</code> with the CLI.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n ng generate component hero-search\n</code-example>\n<p>The CLI generates the three <code>HeroSearchComponent</code> files and adds the component to the <code>AppModule</code> declarations.</p>\n<p>Replace the generated <code>HeroSearchComponent</code> template with an <code><input></code> and a list of matching search results, as follows.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.html\" header=\"src/app/hero-search/hero-search.component.html\">\n<div id=\"search-component\">\n <label for=\"search-box\">Hero Search</label>\n <input #searchBox id=\"search-box\" (input)=\"search(searchBox.value)\" />\n\n <ul class=\"search-result\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes$ | async\" >\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n {{hero.name}}\n </a>\n </li>\n </ul>\n</div>\n\n\n</code-example>\n<p>Add private CSS styles to <code>hero-search.component.css</code>\nas listed in the <a href=\"tutorial/toh-pt6#herosearchcomponent\">final code review</a> below.</p>\n<p>As the user types in the search box, an input event binding calls the\ncomponent's <code>search()</code> method with the new search box value.</p>\n<a id=\"asyncpipe\"></a>\n<h3 id=\"asyncpipe\"><code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">AsyncPipe</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#asyncpipe\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> repeats hero objects. Notice that the <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> iterates over a list called <code>heroes$</code>, not <code>heroes</code>. The <code>$</code> is a convention that indicates <code>heroes$</code> is an <code>Observable</code>, not an array.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.html\" header=\"src/app/hero-search/hero-search.component.html\" region=\"async\">\n<li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes$ | async\" >\n\n</code-example>\n<p>Since <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> can't do anything with an <code>Observable</code>, use the\npipe character (<code>|</code>) followed by <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">async</a></code>. This identifies Angular's <code><a href=\"api/common/AsyncPipe\" class=\"code-anchor\">AsyncPipe</a></code> and subscribes to an <code>Observable</code> automatically so you won't have to\ndo so in the component class.</p>\n<h3 id=\"edit-the-herosearchcomponent-class\">Edit the <code>HeroSearchComponent</code> class<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#edit-the-herosearchcomponent-class\"><i class=\"material-icons\">link</i></a></h3>\n<p>Replace the generated <code>HeroSearchComponent</code> class and metadata as follows.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.ts\" header=\"src/app/hero-search/hero-search.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\n\nimport {\n debounceTime, distinctUntilChanged, switchMap\n } from 'rxjs/operators';\n\nimport { Hero } from '../hero';\nimport { HeroService } from '../hero.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-search',\n templateUrl: './hero-search.component.html',\n styleUrls: [ './hero-search.component.css' ]\n})\nexport class HeroSearchComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n heroes$: Observable<Hero[]>;\n private searchTerms = new Subject<string>();\n\n constructor(private heroService: HeroService) {}\n\n // Push a search term into the observable stream.\n search(term: string): void {\n this.searchTerms.next(term);\n }\n\n ngOnInit(): void {\n this.heroes$ = this.searchTerms.pipe(\n // wait 300ms after each keystroke before considering the term\n debounceTime(300),\n\n // ignore new term if same as previous term\n distinctUntilChanged(),\n\n // switch to new search observable each time the term changes\n switchMap((term: string) => this.heroService.searchHeroes(term)),\n );\n }\n}\n\n\n</code-example>\n<p>Notice the declaration of <code>heroes$</code> as an <code>Observable</code>:</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.ts\" header=\"src/app/hero-search/hero-search.component.ts\" region=\"heroes-stream\">\nheroes$: Observable<Hero[]>;\n\n</code-example>\n<p>You'll set it in <a href=\"tutorial/toh-pt6#search-pipe\"><code>ngOnInit()</code></a>.\nBefore you do, focus on the definition of <code>searchTerms</code>.</p>\n<h3 id=\"the-searchterms-rxjs-subject\">The <code>searchTerms</code> RxJS subject<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#the-searchterms-rxjs-subject\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code>searchTerms</code> property is an RxJS <code>Subject</code>.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.ts\" header=\"src/app/hero-search/hero-search.component.ts\" region=\"searchTerms\">\nprivate searchTerms = new Subject<string>();\n\n// Push a search term into the observable stream.\nsearch(term: string): void {\n this.searchTerms.next(term);\n}\n\n</code-example>\n<p>A <code>Subject</code> is both a source of observable values and an <code>Observable</code> itself.\nYou can subscribe to a <code>Subject</code> as you would any <code>Observable</code>.</p>\n<p>You can also push values into that <code>Observable</code> by calling its <code>next(value)</code> method\nas the <code>search()</code> method does.</p>\n<p>The event binding to the textbox's <code>input</code> event calls the <code>search()</code> method.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.html\" header=\"src/app/hero-search/hero-search.component.html\" region=\"input\">\n<input #searchBox id=\"search-box\" (input)=\"search(searchBox.value)\" />\n\n</code-example>\n<p>Every time the user types in the textbox, the binding calls <code>search()</code> with the textbox value, a \"search term\".\nThe <code>searchTerms</code> becomes an <code>Observable</code> emitting a steady stream of search terms.</p>\n<a id=\"search-pipe\"></a>\n<h3 id=\"chaining-rxjs-operators\">Chaining RxJS operators<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#chaining-rxjs-operators\"><i class=\"material-icons\">link</i></a></h3>\n<p>Passing a new search term directly to the <code>searchHeroes()</code> after every user keystroke would create an excessive amount of HTTP requests,\ntaxing server resources and burning through data plans.</p>\n<p>Instead, the <code>ngOnInit()</code> method pipes the <code>searchTerms</code> observable through a sequence of RxJS operators that reduce the number of calls to the <code>searchHeroes()</code>,\nultimately returning an observable of timely hero search results (each a <code>Hero[]</code>).</p>\n<p>Here's a closer look at the code.</p>\n<code-example path=\"toh-pt6/src/app/hero-search/hero-search.component.ts\" header=\"src/app/hero-search/hero-search.component.ts\" region=\"search\">\nthis.heroes$ = this.searchTerms.pipe(\n // wait 300ms after each keystroke before considering the term\n debounceTime(300),\n\n // ignore new term if same as previous term\n distinctUntilChanged(),\n\n // switch to new search observable each time the term changes\n switchMap((term: string) => this.heroService.searchHeroes(term)),\n);\n\n</code-example>\n<p>Each operator works as follows:</p>\n<ul>\n<li>\n<p><code>debounceTime(300)</code> waits until the flow of new string events pauses for 300 milliseconds\nbefore passing along the latest string. You'll never make requests more frequently than 300ms.</p>\n</li>\n<li>\n<p><code>distinctUntilChanged()</code> ensures that a request is sent only if the filter text changed.</p>\n</li>\n<li>\n<p><code>switchMap()</code> calls the search service for each search term that makes it through <code>debounce()</code> and <code>distinctUntilChanged()</code>.\nIt cancels and discards previous search observables, returning only the latest search service observable.</p>\n</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p> With the <a href=\"https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap\">switchMap operator</a>,\nevery qualifying key event can trigger an <code><a href=\"api/common/http/HttpClient#get\" class=\"code-anchor\">HttpClient.get()</a></code> method call.\nEven with a 300ms pause between requests, you could have multiple HTTP requests in flight\nand they may not return in the order sent.</p>\n<p> <code>switchMap()</code> preserves the original request order while returning only the observable from the most recent HTTP method call.\nResults from prior calls are canceled and discarded.</p>\n<p> Note that canceling a previous <code>searchHeroes()</code> Observable\ndoesn't actually abort a pending HTTP request.\nUnwanted results are discarded before they reach your application code.</p>\n</div>\n<p>Remember that the component <em>class</em> does not subscribe to the <code>heroes$</code> <em>observable</em>.\nThat's the job of the <a href=\"tutorial/toh-pt6#asyncpipe\"><code>AsyncPipe</code></a> in the template.</p>\n<h4 id=\"try-it\">Try it<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#try-it\"><i class=\"material-icons\">link</i></a></h4>\n<p>Run the application again. In the <em>Dashboard</em>, enter some text in the search box.\nIf you enter characters that match any existing hero names, you'll see something like this.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/toh/toh-hero-search.gif\" alt=\"Hero Search field with the letters 'm' and 'a' along with four search results that match the query displayed in a list beneath the search input\" width=\"400\" height=\"299\">\n</div>\n<h2 id=\"final-code-review\">Final code review<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#final-code-review\"><i class=\"material-icons\">link</i></a></h2>\n<p>Here are the code files discussed on this page (all in the <code>src/app/</code> folder).</p>\n<a id=\"heroservice\"></a>\n<a id=\"inmemorydataservice\"></a>\n<a id=\"appmodule\"></a>\n<h4 id=\"heroservice-inmemorydataservice-appmodule\"><code>HeroService</code>, <code>InMemoryDataService</code>, <code>AppModule</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#heroservice-inmemorydataservice-appmodule\"><i class=\"material-icons\">link</i></a></h4>\n<code-tabs>\n <code-pane header=\"hero.service.ts\" path=\"toh-pt6/src/app/hero.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>, <a href=\"api/common/http/HttpHeaders\" class=\"code-anchor\">HttpHeaders</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\nimport { Observable, of } from 'rxjs';\nimport { catchError, map, tap } from 'rxjs/operators';\n\nimport { Hero } from './hero';\nimport { MessageService } from './message.service';\n\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({ providedIn: 'root' })\nexport class HeroService {\n\n private heroesUrl = 'api/heroes'; // URL to web api\n\n httpOptions = {\n headers: new <a href=\"api/common/http/HttpHeaders\" class=\"code-anchor\">HttpHeaders</a>({ 'Content-Type': 'application/json' })\n };\n\n constructor(\n private <a href=\"api/common/http\" class=\"code-anchor\">http</a>: <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>,\n private messageService: MessageService) { }\n\n /** GET heroes from the server */\n getHeroes(): Observable<Hero[]> {\n return this.http.get<Hero[]>(this.heroesUrl)\n .pipe(\n tap(_ => this.log('fetched heroes')),\n catchError(this.handleError<Hero[]>('getHeroes', []))\n );\n }\n\n /** GET hero by id. Return `undefined` when id not found */\n getHeroNo404<<a href=\"api/router/Data\" class=\"code-anchor\">Data</a>>(id: number): Observable<Hero> {\n const url = `${this.heroesUrl}/?id=${id}`;\n return this.http.get<Hero[]>(url)\n .pipe(\n map(heroes => heroes[0]), // returns a {0|1} element array\n tap(h => {\n const outcome = h ? `fetched` : `did not find`;\n this.log(`${outcome} hero id=${id}`);\n }),\n catchError(this.handleError<Hero>(`getHero id=${id}`))\n );\n }\n\n /** GET hero by id. Will 404 if id not found */\n getHero(id: number): Observable<Hero> {\n const url = `${this.heroesUrl}/${id}`;\n return this.http.get<Hero>(url).pipe(\n tap(_ => this.log(`fetched hero id=${id}`)),\n catchError(this.handleError<Hero>(`getHero id=${id}`))\n );\n }\n\n /* GET heroes whose name contains search term */\n searchHeroes(term: string): Observable<Hero[]> {\n if (!term.trim()) {\n // if not search term, return empty hero array.\n return of([]);\n }\n return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(\n tap(x => x.length ?\n this.log(`found heroes matching \"${term}\"`) :\n this.log(`no heroes matching \"${term}\"`)),\n catchError(this.handleError<Hero[]>('searchHeroes', []))\n );\n }\n\n //////// Save methods //////////\n\n /** POST: add a new hero to the server */\n addHero(hero: Hero): Observable<Hero> {\n return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(\n tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),\n catchError(this.handleError<Hero>('addHero'))\n );\n }\n\n /** DELETE: delete the hero from the server */\n deleteHero(id: number): Observable<Hero> {\n const url = `${this.heroesUrl}/${id}`;\n\n return this.http.delete<Hero>(url, this.httpOptions).pipe(\n tap(_ => this.log(`deleted hero id=${id}`)),\n catchError(this.handleError<Hero>('deleteHero'))\n );\n }\n\n /** PUT: update the hero on the server */\n updateHero(hero: Hero): Observable<any> {\n return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(\n tap(_ => this.log(`updated hero id=${hero.id}`)),\n catchError(this.handleError<any>('updateHero'))\n );\n }\n\n /**\n * Handle Http operation that failed.\n * Let the app continue.\n * @param operation - name of the operation that failed\n * @param result - optional value to return as the observable result\n */\n private handleError<T>(operation = 'operation', result?: T) {\n return (error: any): Observable<T> => {\n\n // TODO: send the error to remote logging infrastructure\n console.error(error); // log to console instead\n\n // TODO: better job of transforming error for user consumption\n this.log(`${operation} failed: ${error.message}`);\n\n // Let the app keep running by returning an empty result.\n return of(result as T);\n };\n }\n\n /** Log a HeroService message with the MessageService */\n private log(message: string) {\n this.messageService.add(`HeroService: ${message}`);\n }\n}\n\n\n</code-pane>\n <code-pane header=\"in-memory-data.service.ts\" path=\"toh-pt6/src/app/in-memory-data.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { InMemoryDbService } from 'angular-in-memory-web-api';\nimport { Hero } from './hero';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n providedIn: 'root',\n})\nexport class InMemoryDataService implements InMemoryDbService {\n createDb() {\n const heroes = [\n { id: 11, name: 'Dr Nice' },\n { id: 12, name: 'Narco' },\n { id: 13, name: 'Bombasto' },\n { id: 14, name: 'Celeritas' },\n { id: 15, name: 'Magneta' },\n { id: 16, name: 'RubberMan' },\n { id: 17, name: 'Dynama' },\n { id: 18, name: 'Dr IQ' },\n { id: 19, name: 'Magma' },\n { id: 20, name: 'Tornado' }\n ];\n return {heroes};\n }\n\n // Overrides the genId method to ensure that a hero always has an id.\n // If the heroes array is empty,\n // the method below returns the initial number (11).\n // if the heroes array is not empty, the method below returns the highest\n // hero id + 1.\n genId(heroes: Hero[]): number {\n return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;\n }\n}\n\n\n</code-pane>\n <code-pane header=\"app.module.ts\" path=\"toh-pt6/src/app/app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\nimport { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';\nimport { InMemoryDataService } from './in-memory-data.service';\n\nimport { AppRoutingModule } from './app-routing.module';\n\nimport { AppComponent } from './app.component';\nimport { DashboardComponent } from './dashboard/dashboard.component';\nimport { HeroDetailComponent } from './hero-detail/hero-detail.component';\nimport { HeroesComponent } from './heroes/heroes.component';\nimport { HeroSearchComponent } from './hero-search/hero-search.component';\nimport { MessagesComponent } from './messages/messages.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n AppRoutingModule,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n\n // The HttpClientInMemoryWebApiModule module intercepts HTTP requests\n // and returns simulated server responses.\n // Remove it when a real server is ready to receive requests.\n HttpClientInMemoryWebApiModule.forRoot(\n InMemoryDataService, { dataEncapsulation: false }\n )\n ],\n declarations: [\n AppComponent,\n DashboardComponent,\n HeroesComponent,\n HeroDetailComponent,\n MessagesComponent,\n HeroSearchComponent\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n</code-pane>\n</code-tabs>\n<a id=\"heroescomponent\"></a>\n<h4 id=\"heroescomponent\"><code>HeroesComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#heroescomponent\"><i class=\"material-icons\">link</i></a></h4>\n<code-tabs>\n <code-pane header=\"heroes/heroes.component.html\" path=\"toh-pt6/src/app/heroes/heroes.component.html\">\n<h2>My Heroes</h2>\n\n<div>\n <label id=\"new-hero\">Hero name: </label>\n <input for=\"new-hero\" #heroName />\n\n <!-- (click) passes input value to add() and then clears the input -->\n <button class=\"add-button\" (click)=\"add(heroName.value); heroName.value=''\">\n Add hero\n </button>\n</div>\n\n<ul class=\"heroes\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\">\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n <span class=\"badge\">{{hero.id}}</span> {{hero.name}}\n </a>\n <button class=\"delete\" title=\"delete hero\"\n (click)=\"delete(hero)\">x</button>\n </li>\n</ul>\n\n\n</code-pane>\n <code-pane header=\"heroes/heroes.component.ts\" path=\"toh-pt6/src/app/heroes/heroes.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\n\nimport { Hero } from '../hero';\nimport { HeroService } from '../hero.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-heroes',\n templateUrl: './heroes.component.html',\n styleUrls: ['./heroes.component.css']\n})\nexport class HeroesComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n heroes: Hero[];\n\n constructor(private heroService: HeroService) { }\n\n ngOnInit() {\n this.getHeroes();\n }\n\n getHeroes(): void {\n this.heroService.getHeroes()\n .subscribe(heroes => this.heroes = heroes);\n }\n\n add(name: string): void {\n name = name.trim();\n if (!name) { return; }\n this.heroService.addHero({ name } as Hero)\n .subscribe(hero => {\n this.heroes.push(hero);\n });\n }\n\n delete(hero: Hero): void {\n this.heroes = this.heroes.filter(h => h !== hero);\n this.heroService.deleteHero(hero.id).subscribe();\n }\n\n}\n\n\n</code-pane>\n <code-pane header=\"heroes/heroes.component.css\" path=\"toh-pt6/src/app/heroes/heroes.component.css\">\n/* HeroesComponent's private CSS styles */\n.heroes {\n margin: 0 0 2em 0;\n list-style-type: none;\n padding: 0;\n width: 15em;\n}\n\ninput {\n display: block;\n width: 100%;\n padding: .5rem;\n margin: 1rem 0;\n box-sizing: border-box;\n}\n\n.heroes li {\n position: relative;\n cursor: pointer;\n}\n\n.heroes li:hover {\n left: .1em;\n}\n\n.heroes a {\n color: #333;\n text-decoration: none;\n background-color: #EEE;\n margin: .5em;\n padding: .3em 0;\n height: 1.6em;\n border-radius: 4px;\n display: block;\n width: 100%;\n}\n\n.heroes a:hover {\n color: #2c3a41;\n background-color: #e6e6e6;\n}\n\n.heroes a:active {\n background-color: #525252;\n color: #fafafa;\n}\n\n.heroes .badge {\n display: inline-block;\n font-size: small;\n color: white;\n padding: 0.8em 0.7em 0 0.7em;\n background-color:#405061;\n line-height: 1em;\n position: relative;\n left: -1px;\n top: -4px;\n height: 1.8em;\n min-width: 16px;\n text-align: right;\n margin-right: .8em;\n border-radius: 4px 0 0 4px;\n}\n\n.add-button {\n padding: .5rem 1.5rem;\n font-size: 1rem;\n margin-bottom: 2rem;\n}\n\n.add-button:hover {\n color: white;\n background-color: #42545C;\n}\n\nbutton.delete {\n position: absolute;\n left: 210px;\n top: 5px;\n background-color: white;\n color: #525252;\n font-size: 1.1rem;\n padding: 1px 10px 3px 10px;\n}\n\nbutton.delete:hover {\n background-color: #525252;\n color: white;\n}\n\n\n</code-pane>\n</code-tabs>\n<a id=\"herodetailcomponent\"></a>\n<h4 id=\"herodetailcomponent\"><code>HeroDetailComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#herodetailcomponent\"><i class=\"material-icons\">link</i></a></h4>\n<code-tabs>\n <code-pane header=\"hero-detail/hero-detail.component.html\" path=\"toh-pt6/src/app/hero-detail/hero-detail.component.html\">\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"hero\">\n <h2>{{hero.name | <a href=\"api/common/UpperCasePipe\" class=\"code-anchor\">uppercase</a>}} Details</h2>\n <div><span>id: </span>{{hero.id}}</div>\n <div>\n <label for=\"hero-name\">Hero name: </label>\n <input id=\"hero-name\" [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"hero.name\" placeholder=\"Hero name\"/>\n </div>\n <button (click)=\"goBack()\">go back</button>\n <button (click)=\"save()\">save</button>\n</div>\n\n\n</code-pane>\n <code-pane header=\"hero-detail/hero-detail.component.ts\" path=\"toh-pt6/src/app/hero-detail/hero-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\nimport { <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> } from '@angular/router';\nimport { <a href=\"api/common/Location\" class=\"code-anchor\">Location</a> } from '@angular/common';\n\nimport { Hero } from '../hero';\nimport { HeroService } from '../hero.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-detail',\n templateUrl: './hero-detail.component.html',\n styleUrls: [ './hero-detail.component.css' ]\n})\nexport class HeroDetailComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n hero: Hero;\n\n constructor(\n private route: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>,\n private heroService: HeroService,\n private location: <a href=\"api/common/Location\" class=\"code-anchor\">Location</a>\n ) {}\n\n ngOnInit(): void {\n this.getHero();\n }\n\n getHero(): void {\n const id = +this.route.snapshot.paramMap.get('id');\n this.heroService.getHero(id)\n .subscribe(hero => this.hero = hero);\n }\n\n goBack(): void {\n this.location.back();\n }\n\n save(): void {\n this.heroService.updateHero(this.hero)\n .subscribe(() => this.goBack());\n }\n}\n\n\n</code-pane>\n</code-tabs>\n<a id=\"dashboardcomponent\"></a>\n<h4 id=\"dashboardcomponent\"><code>DashboardComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#dashboardcomponent\"><i class=\"material-icons\">link</i></a></h4>\n<code-tabs>\n <code-pane header=\"src/app/dashboard/dashboard.component.html\" path=\"toh-pt6/src/app/dashboard/dashboard.component.html\">\n<h2>Top Heroes</h2>\n<div class=\"heroes-menu\">\n <a *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\"\n <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n {{hero.name}}\n </a>\n</div>\n\n<app-hero-search></app-hero-search>\n\n\n</code-pane>\n</code-tabs>\n<a id=\"herosearchcomponent\"></a>\n<h4 id=\"herosearchcomponent\"><code>HeroSearchComponent</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#herosearchcomponent\"><i class=\"material-icons\">link</i></a></h4>\n<code-tabs>\n <code-pane header=\"hero-search/hero-search.component.html\" path=\"toh-pt6/src/app/hero-search/hero-search.component.html\">\n<div id=\"search-component\">\n <label for=\"search-box\">Hero Search</label>\n <input #searchBox id=\"search-box\" (input)=\"search(searchBox.value)\" />\n\n <ul class=\"search-result\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes$ | async\" >\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/detail/{{hero.id}}\">\n {{hero.name}}\n </a>\n </li>\n </ul>\n</div>\n\n\n</code-pane>\n <code-pane header=\"hero-search/hero-search.component.ts\" path=\"toh-pt6/src/app/hero-search/hero-search.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\n\nimport {\n debounceTime, distinctUntilChanged, switchMap\n } from 'rxjs/operators';\n\nimport { Hero } from '../hero';\nimport { HeroService } from '../hero.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-search',\n templateUrl: './hero-search.component.html',\n styleUrls: [ './hero-search.component.css' ]\n})\nexport class HeroSearchComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n heroes$: Observable<Hero[]>;\n private searchTerms = new Subject<string>();\n\n constructor(private heroService: HeroService) {}\n\n // Push a search term into the observable stream.\n search(term: string): void {\n this.searchTerms.next(term);\n }\n\n ngOnInit(): void {\n this.heroes$ = this.searchTerms.pipe(\n // wait 300ms after each keystroke before considering the term\n debounceTime(300),\n\n // ignore new term if same as previous term\n distinctUntilChanged(),\n\n // switch to new search observable each time the term changes\n switchMap((term: string) => this.heroService.searchHeroes(term)),\n );\n }\n}\n\n\n</code-pane>\n <code-pane header=\"hero-search/hero-search.component.css\" path=\"toh-pt6/src/app/hero-search/hero-search.component.css\">\n/* HeroSearch private styles */\n\nlabel {\n display: block;\n font-weight: bold;\n font-size: 1.2rem;\n margin-top: 1rem;\n margin-bottom: .5rem;\n\n}\ninput {\n padding: .5rem;\n width: 100%;\n max-width: 600px;\n box-sizing: border-box;\n display: block;\n}\n\ninput:focus {\n outline: #336699 auto 1px;\n}\n\nli {\n list-style-type: none;\n}\n.search-result li a {\n border-bottom: 1px solid gray;\n border-left: 1px solid gray;\n border-right: 1px solid gray;\n display: inline-block;\n width: 100%;\n max-width: 600px;\n padding: .5rem;\n box-sizing: border-box;\n text-decoration: none;\n color: black;\n}\n\n.search-result li a:hover {\n background-color: #435A60;\n color: white;\n}\n\nul.search-result {\n margin-top: 0;\n padding-left: 0;\n}\n\n\n</code-pane>\n</code-tabs>\n<h2 id=\"summary\">Summary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"tutorial/toh-pt6#summary\"><i class=\"material-icons\">link</i></a></h2>\n<p>You're at the end of your journey, and you've accomplished a lot.</p>\n<ul>\n<li>You added the necessary dependencies to use HTTP in the app.</li>\n<li>You refactored <code>HeroService</code> to load heroes from a web API.</li>\n<li>You extended <code>HeroService</code> to support <code>post()</code>, <code>put()</code>, and <code>delete()</code> methods.</li>\n<li>You updated the components to allow adding, editing, and deleting of heroes.</li>\n<li>You configured an in-memory web API.</li>\n<li>You learned how to use observables.</li>\n</ul>\n<p>This concludes the \"Tour of Heroes\" tutorial.\nYou're ready to learn more about Angular development in the fundamentals section,\nstarting with the <a href=\"guide/architecture\" title=\"Architecture\">Architecture</a> guide.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/example-apps-list\n - tutorial/toh-pt4\n-->\n<!-- links from this doc:\n - api/common/AsyncPipe\n - api/common/Location\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/UpperCasePipe\n - api/common/http\n - api/common/http/HttpClient\n - api/common/http/HttpClient#delete\n - api/common/http/HttpClient#get\n - api/common/http/HttpClient#post\n - api/common/http/HttpClient#put\n - api/common/http/HttpClientModule\n - api/common/http/HttpHeaders\n - api/core/Component\n - api/core/Injectable\n - api/core/NgModule\n - api/core/OnInit\n - api/forms/FormsModule\n - api/forms/NgModel\n - api/platform-browser/BrowserModule\n - api/router/ActivatedRoute\n - api/router/Data\n - api/router/RouterLink\n - guide/architecture\n - tutorial/toh-pt6#add-a-new-hero\n - tutorial/toh-pt6#add-heroserviceupdatehero\n - tutorial/toh-pt6#add-search-to-the-dashboard\n - tutorial/toh-pt6#asyncpipe\n - tutorial/toh-pt6#chaining-rxjs-operators\n - tutorial/toh-pt6#create-herosearchcomponent\n - tutorial/toh-pt6#dashboardcomponent\n - tutorial/toh-pt6#delete-a-hero\n - tutorial/toh-pt6#edit-the-herosearchcomponent-class\n - tutorial/toh-pt6#enable-http-services\n - tutorial/toh-pt6#error-handling\n - tutorial/toh-pt6#final-code-review\n - tutorial/toh-pt6#get-data-from-a-server\n - tutorial/toh-pt6#get-hero-by-id\n - tutorial/toh-pt6#get-heroes-with-httpclient\n - tutorial/toh-pt6#handleerror\n - tutorial/toh-pt6#herodetailcomponent\n - tutorial/toh-pt6#heroes-and-http\n - tutorial/toh-pt6#heroescomponent\n - tutorial/toh-pt6#herosearchcomponent\n - tutorial/toh-pt6#heroservice-inmemorydataservice-appmodule\n - tutorial/toh-pt6#heroservicesearchheroes\n - tutorial/toh-pt6#httpclient-methods-return-one-value\n - tutorial/toh-pt6#httpclientget-returns-response-data\n - tutorial/toh-pt6#import-heroes\n - tutorial/toh-pt6#search-by-name\n - tutorial/toh-pt6#search-pipe\n - tutorial/toh-pt6#simulate-a-data-server\n - tutorial/toh-pt6#summary\n - tutorial/toh-pt6#tap-into-the-observable\n - tutorial/toh-pt6#the-searchterms-rxjs-subject\n - tutorial/toh-pt6#try-it\n - tutorial/toh-pt6#update-heroes\n - https://github.com/angular/angular/edit/master/aio/content/tutorial/toh-pt6.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/master/packages/misc/angular-in-memory-web-api\n - https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap\n-->"
|
|
} |