To show a component class property in the template and update that property when the user makes a change requires two-way binding. To specify two-way binding in Angular, we use the ngModel directive. We enclose ngModel in square brackets to show property binding from the class property to the input element, and parentheses to dend a notification of the user-entered data back to the class property. We demo this two-way binding between the search input box & the SEARCHING label.
- We're going to go ahead and start building…the functionality for our search feature.…It has two parts to it.…The first will be to set up our input box…so when we type in a word here,…it actually appears right next to the word…Searching, dynamically.…We're going to be doing that using two-way binding.…The second part of the search feature,…would be to filter to do the searching…with the word that we put in the input box.…That's going to be handled later on in the course.…Right now, let's go ahead and focus…on handling the two-way binding for the data…that we put in the input box.…
The first thing we want to do,…is to go to our component class…and add a property right below seePoster…to have a default value of Titanic…for the property listFilter.…The next thing we'll want to do…is to move onto our template…our movie list component template…and for the input box element…we are going to use Angular's ngModel feature.…
To specify two-way binding in Angular,…we use the ngModel directive…and bind to listFilter property.…
- Creating components
- Bootstrapping components
- Working with templates
- Using directives and interpolation
- Binding and transforming data
- Creating advanced and nested components
- Creating services
- Obtaining data with HTTP calls
- Configuring routes
Skill Level Intermediate
1. Course Overview
3. Directives, Interpolation, and Templates
5. Advanced Components
7. Obtaining Data with HTTP
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.