Components
Inside of a component, there are two main things you need to think about:
To connect (make aware) template and class with one another, we use Metadata.
Your component should do only two things
- Consume just enough data to render its templates.
- Capture user events and then delegate that elsewhere.
Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.
The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.
Decorators are functions that modify JavaScript classes. Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work.
Templates, directives, and data binding
A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding:
| Data bindings | Details |
|---|---|
| Event binding | Lets your application respond to user input in the target environment by updating your application data. |
| Property binding | Lets you interpolate values that are computed from your application data into the HTML. |
Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.
Your templates can use pipes to improve the user experience by transforming values for display. For example, use pipes to display dates and currency values that are appropriate for a user's locale. Angular provides predefined pipes for common transformations, and you can also define your own pipes.
Children
Backlinks