Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create Application-Specific Angular 2 Components

    John LindquistJohn Lindquist

    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.

    angularAngular
    2 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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."

    Discuss

    Discuss