Angular 2 - Using other components in a component


While an Angular app could be made up of only a single component if the app is small, most likely it will be a composition of many components. 

Components are really just a directive with a view. In fact, the component metadata inherits from the directive metadata. So a component is a really a directive at heart and the angular platform is full of built-in directives that it makes available to your app. 

Create a component media-item which will have media-item.component.ts  will be used to display 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. 

In app.component.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MediaItemComponent } from './media-item.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent,
    MediaItemComponent
  ],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule {}



In app.component.html :


<section>  
<header>
    <h1>Media Watch List</h1>
    <p class="description">Keeping track of the media I want to watch. </p>
  </header>
  <mw-media-item></mw-media-item>
</section>



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's available for use in other templates.