Summary: Enabling User Experience with Components

In this chapter, we explored the structure of Angular components and the different ways to create them. We learned how to create a standalone component or register it with an Angular module. We discussed how to isolate the component’s HTML template in an external file to ease its future maintainability. Also, we saw how to do the same with any style sheet we wanted to bind to the component, in case we did not want to bundle the component styles in-line.

We also learned how to use the Angular template syntax and interact with the component template. Similarly, we went through how components communicate in a bidirectional way using property and event bindings.

We were guided through the options available in Angular for creating powerful APIs for our components, so that we can provide high levels of interoperability between components, configuring their properties by assigning either static values or managed bindings.

We also saw how a component can act as a host component for another child component, instantiating the former’s custom element in its template, and laying the ground for larger component trees in our applications. Output parameters give the layer of interactivity we need by turning our components into event emitters, so that they can adequately communicate with any parent component that might eventually host them in an agnostic fashion.