Components 101

Components are the building blocks of Angular applications, and any such application needs at least one component called the root component to be defined before it can be executed.

A basic root component

A component is defined in Angular as a class with specific metadata that associates it with an HTML template and a jQuery-like HTML DOM selector:

• The component template can be bound to any properties or functions that belong to the component class
• The component selector (similar to a jQuery selector) can target an element tag, attribute, or style class that defines the component insertion point

When executed within an Angular application, a component will usually render an HTML snippet in a specific page location that can react to user input and display dynamic data.

The component metadata is expressed as a TypeScript decorator and supports additional configuration that will be covered throughout the examples from this chapter.

Note

TypeScript decorators are covered in Chapter 1,...