Angular - 2-6 Use of components

With our component now declared in the AppModule, it is finally time to use it. The selector we defined is app-server, but as mentioned before we are not going to add it to index.html — that is not how Angular works. Instead, we go to app.component.html, which is currently the only other piece of HTML in the project, and we drop our new tag in there.

To make the example a little more readable I add a horizontal rule and, just below it, the server element. Many editors and IDEs ship with an Emmet plugin which makes writing HTML much faster: typing app-server and hitting Tab expands the line into the proper element. The shortcut is convenient, but the important detail is the selector itself — it is our own, the one we declared on the component.

<hr>
<app-server></app-server>

As soon as we save the file, the dev server recompiles successfully. Refreshing the running application in the browser, we can see our brand new server component rendered on the page, right under the rule we just inserted. This is the whole point of components: register them in the application module, then drop their selectors anywhere in another template to make them appear.

This tiny example shows the full loop of building reusable UI in Angular. We created a class, decorated it with @Component, listed it in the module declarations and finally consumed it through its selector. From here on, the same pattern will let us compose pages out of many small, focused components instead of stuffing everything into a single template.

Summary

This lesson demonstrates how to use custom Angular components after creating them. You integrate a component into your application by adding its selector to the app.component.html file, not the index.html. The lesson shows the complete workflow: placing the component selector in the template, ensuring the component is declared in the application module, and watching the application recompile automatically to display your custom component on the page.

Key points

  • Add custom component selectors to app.component.html, not index.html, to use your created components
  • Use the component's HTML selector element in your template after declaring it in the application module
  • Automatically recompile and view your component by saving the file with the selector properly placed
  • Components must be declared in the application module before their selectors can be used anywhere in the app
  • IDE shortcuts like Emmet can speed up writing HTML code when inserting component selectors

FAQ

Where should I add my custom component selector in the HTML files?

Add your component selector to the app.component.html file, not to index.html. The app.component.html is the proper location for using component selectors within your application templates.

What happens when I save the file after adding a component selector?

Once you save the file, the Angular application automatically recompiles and displays your component on the page. You can immediately see the component rendered in your running development server.

Do I need to do anything special to use a component after creating it?

Yes, the component must first be declared in the application module. After that, you can use the component by placing its selector element in any HTML template where you want it to appear.