Property binding will allow us to set a property of an element to the value of a template expression. Here we property bind the source property of the image element to the imageUrl property of the product. We then use image styles to adjust height and width of image that default to sizes too large.
- [Instructor] When we're done with our application,…we're going to have the ability to see a movie poster…associated for each movie record.…Let's go ahead and start working on that logic now.…The way we're going to go ahead and have the ability…to see the movie poster is by using property binding.…Property binding allows us to set the property…of an element to the value of a template expression.…So let's go ahead and use it to bind the source…of our movie image.…The first thing I'm going to go ahead and do…is make sure that I'm opened up…to our movie list component template,…and then navigate down to the T body node…and within the first table data element,…I'll go ahead and enter in this code.…
What I'm doing is using an image element to bind…the source to the movie image url property…from the movie list component class,…and we do the same for the title…which will be bound to the movie name.…So let me go ahead and make sure that everything is saved,…get focus on the top of the solution explorer,…and run the project.…
- 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.