4 Component basics

 

This chapter covers

  • The basics of components and their role
  • The @Component decorator and its most important properties
  • Rendering a component
  • Passing data into and out of a component using inputs and outputs
  • Customizing components with templates and styling
  • Injecting content into a component using projection

Components are so central to how Angular applications are structured that almost every feature is somehow linked to them. It’s impossible to make an Angular application without a component, after all. This means being able to harness the capabilities of components is vital to any developer. They are so important, I’ve dedicated the next chapter to additional, more advanced topics involving components.

You saw a couple of components in action in the chapter 2 examples, but in this chapter we’ll start with the basics of components to ensure that you have a clear overview of how they’re declared and designed. We’ll then look at some of the additional capabilities of components that you’ll use most frequently.

A component includes a template, which is the HTML markup used to describe its visual layout and behavior. We’ll look at how to make the most of these templates, understand how they’re rendered, and give them individual stylings.

4.1 Setting up the chapter example

4.1.1 Getting the code

4.2 Composition and lifecycle of a component

4.2.1 Component lifecycle

4.2.2 Lifecycle hooks

4.2.3 Nesting components

4.3 Types of components

4.4 Creating a Data component

4.5 Using inputs with components

4.5.1 Input basics

4.5.2 Intercepting inputs

4.6 Content projection

Summary