honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update hero search component to use input event (#26440) 

PR Close #26440
This commit is contained in:
Nikhil Sharma 2018-10-15 02:23:19 +05:30 committed by Andrew Kushnir
parent 19546c234e
commit 0d972d9bbf
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
View File

@ -2,7 +2,7 @@
<h4>Hero Search</h4> <h4>Hero Search</h4>
<!-- #docregion input --> <!-- #docregion input -->
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> <input #searchBox id="search-box" (input)="search(searchBox.value)" />
<!-- #enddocregion input --> <!-- #enddocregion input -->
<ul class="search-result"> <ul class="search-result">

2
aio/content/examples/universal/src/app/hero-search/hero-search.component.html
View File

@ -1,7 +1,7 @@
<div id="search-component"> <div id="search-component">
<h4>Hero Search</h4> <h4>Hero Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> <input #searchBox id="search-box" (input)="search(searchBox.value)" />
<ul class="search-result"> <ul class="search-result">
<li *ngFor="let hero of heroes | async" > <li *ngFor="let hero of heroes | async" >

4
aio/content/tutorial/toh-pt6.md
View File

@ -461,7 +461,7 @@ Replace the generated `HeroSearchComponent` _template_ with a text box and a lis
Add private CSS styles to `hero-search.component.css` Add private CSS styles to `hero-search.component.css`
as listed in the [final code review](#herosearchcomponent) below. as listed in the [final code review](#herosearchcomponent) below.
As the user types in the search box, a *keyup* event binding calls the component's `search()` As the user types in the search box, an *input* event binding calls the component's `search()`
method with the new search box value. method with the new search box value.
{@a asyncpipe} {@a asyncpipe}
@ -511,7 +511,7 @@ You can also push values into that `Observable` by calling its `next(value)` met
as the `search()` method does. as the `search()` method does.
The `search()` method is called via an _event binding_ to the The `search()` method is called via an _event binding_ to the
textbox's `keystroke` event. textbox's `input` event.
<code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="input"></code-example> <code-example path="toh-pt6/src/app/hero-search/hero-search.component.html" region="input"></code-example>