16 Understanding components

 

This chapter covers

  • Defining component classes and templates
  • Binding templates to component classes
  • Using input and output properties in components
  • Styling content generated by components
  • Querying content generated by components

Components are directives that have their own templates, rather than relying on content provided from elsewhere. Components have access to all the directive features described in earlier chapters and still have a host element, can still define input and output properties, and so on. But they also define their own content using templates.

It can be easy to underestimate the importance of the template, but attribute and structural directives have limitations. Directives can do useful and powerful work, but they don’t have much insight into the elements they are applied to. Directives are most useful when they are general-purpose tools, such the ngModel directive, which can be applied to any data model property and any form element, without regard to what the data or the element is being used for.

16.1 Preparing the example project

16.2 Structuring an application with components

16.2.1 Creating new components

16.2.2 Defining templates

16.2.3 Completing the component restructure

16.3 Using component styles

16.3.1 Defining external component styles

16.4 Querying template content

16.5 Summary