Using other components in a component - lordoftheflies/angular-essential-training GitHub Wiki

While an Angular app could be made up of only a single component if the app was small, most likely it will be a composition of many components. So how do you start putting all of those components together? Well, as we learned earlier, components are really just a directive with a view. In fact, the component metadata inherits from the directive metadata. So a component is really a directive at heart and the Angular platform is full of built-in directives that it makes available to your app. You just need to make your components available to your app in a similar way. Okay, we've got this new component already added in a project for this lesson named media item in a file named media-item.component.ts. This thing will be used to display the details of a media item and we want to use it from within the app component. If we take a look at this new file, we can see the import and component decorator along with the component metadata object literal we have learned about to this point. And of course, the component class below that. This component also has a template file named media-item.component.html that has some sample content to display a media item. Let's get this added to the app module so it knows it is available for use in other templates. Over in the app.module.ts file where we have the AppModule class, we want to add the new media item component to the declarations and metadata property. So let's first add the import statement for that. Then we can add the media item component to the declarations array. Now we can switch over to the app.component.html