diff --git a/starwars/src/app/search/search.component.html b/starwars/src/app/search/search.component.html index 7b0ffbc..e0c879c 100644 --- a/starwars/src/app/search/search.component.html +++ b/starwars/src/app/search/search.component.html @@ -1,6 +1,5 @@

Search For A Star Wars Character

- Search String: {{name}} - +
diff --git a/starwars/src/app/search/search.component.ts b/starwars/src/app/search/search.component.ts index c708abe..e3a5693 100644 --- a/starwars/src/app/search/search.component.ts +++ b/starwars/src/app/search/search.component.ts @@ -9,6 +9,10 @@ export class SearchComponent implements OnInit { constructor() { } + findCharacter(name){ + console.log('finding ' + name); + } + ngOnInit() { } diff --git a/use_an_api.md b/use_an_api.md index 12ea60f..87a9c1b 100644 --- a/use_an_api.md +++ b/use_an_api.md @@ -9,6 +9,7 @@ 1. Add Form HTML to search component 1. Import Form functionality into the app 1. Set a component property to the value of an input +1. Invoke a function when the user clicks a button ## Create a new app @@ -95,3 +96,25 @@ In `src/app/search/search.component.html`, add `[(ngModel)]` to the text input: ``` Test this by changing the text in the input field + +## Invoke a function when the user clicks a button + +In `src/app/search/search.component.ts` add a `findCharacter` method to SearchComponent: + +```javascript +findCharacter(name){ + console.log('finding ' + name); +} +``` + +Call it in `src/app/search/search.component.html` (also remove the `Search String:{{name}}` test code): + +```html +
+

Search For A Star Wars Character

+ + +
+``` + +Test this by looking in the console