While setting up the nested component shows stars, we enhance it to show stars correctly in fractions using input decorator. We add input decorator to the rating property and remove unneeded default values. We demo by showing how to use property binding and define the nested components input property as the target. We then set the binding source to the value we want to pass in.
- [Instructor] We want to finish setting up our…review components so that it displays the stars correctly.…Currently it's showing five stars…even though the rating is at four…and we're going to go ahead and address this…using the input decorator.…If a nested component wants to receive input…from its container,…it must expose a property to the container…and this can be done with the input container…so let's go ahead and get started…by opening up the review.component.ts file…and the first thing we're going to want to do…is to add input in our import statement.…
Next is to add the input decorator…to the rating property…and remove the default value of four.…So all we need to do…is on line nine,…add and make sure we have our parentheses…right before the rating…and remove equals four.…We're using parentheses right after input…because it is a function.…Next let's go ahead and navigate to…movie-list.component.html.…
That is our template…and we will use property binding…and define the nested components input property…as a target.…
- 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.