Create Application-Specific Angular 2 Components
Many components you create will be specific to your application because they will rely on your application services. These application-specific components are often called “feature” components and they follow a module pattern which integrates them with your application.
[00:00] A feature component usually lives inside of its own directory with its own module. I'll create a directory called home, and say home.component.ts. Inside of this file, we'll create a component. This will have a selector of home, and a template of a div saying, "I'm a home component."
[00:29] Just make sure to decorate this as a class. Then our future component is basically done. It's just some configuration inside of this home directory, where we create a home.module.ts. Inside of here, we'll say NG module.
[00:51] Our declarations, we need to declare the home component. As well this time, we also need to export the home component. Now we export the class home module. The reason you're declaring this twice inside of exports and inside of declarations is because you could be importing this home component from somewhere else.
[01:19] You either declare it or import it inside of the imports where you import other modules. Because this is living inside of this module, we just declare it, and then re-export it. Now inside of our app module, we can import the home module.
[01:38] Inside of our app component, we now have access to the home component. This home matches the home component selector. You can see between these two components, home and app component, in app we're just using that home selector, in home, now we've created that selector, and created a template for it.
[02:04] I'll hit save. You'll now see I'm a home component. Again, the full div structure looks like this, where you have your main, which is bootstrapping the module. The module is importing both the browser module and the home module.
[02:18] In the app component, you're referencing this home selector, which is available because in app module, you're importing the home module. This home selector is available because in app module, you are importing home module.
[02:36] Everything in home module is available to this, but the only thing we're exporting for now is just the home component. Home component has a selector of home, and a template of, "I am a home component," which lands here as, "I'm a home component."