Reynald shows that up to this point, we saw how to use our app component as a directive by bootstrapping our root app component, but that technique is only appropriate for our root component. For other components, we'll follow 3 steps. 1. Add the directive to where we want to display the directive components template 2. Identify each directive that is used in the template and add that component to the containers directives array 3. Add the import for the movie list component
- [Narrator] Previously, we created our MovieListComponent…and our templateURL property pointed to our template…which was movie-list.component, this HTML here.…Now we want to use it.…And in order to use it, what we need to do…is very similar to how we added our string message…"Welcome to our first project."…If you recall, in our index page we added…the selector name here, my-app.…
So we're going to do something very similar.…What we're going to do is go back…to our app.component.ts file…and in the template here, we're going…to basically replace that welcome message…with a string that includes the welcome message…but also the mm-movies selector.…So the only difference is that we change the quotes…to a backtick, and what that does is allows us…to write an extended template on multiple lines.…
That's one change.…And the other change is we added this div tag…that includes the selector movies…that we're going to reference.…So the next thing we're going to do…is add a comma and then add the property's directives…and then assign it MovieListComponent.…
- 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.