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.