📄️ Why Components
One of the main concepts in Angular is that your application is split into a tree of components. Each component represents a reusable piece of the UI that:
📄️ Component Anatomy
In Angular, a component is a class decorated with the @Component decorator.
📄️ Interpolation
Angular template interpolation ({{ ... }}) is the way of telling Angular to use data from the component class in the view.
📄️ Property Binding
Property binding in Angular lets you set values for child elements' DOM properties or child Angular components inputs, using the [property] syntax.
📄️ Event Binding
Event binding in Angular lets your components respond to user actions and browser events, using the (event) syntax.
📄️ View Model
The mental model of Angular is the View Model. It's the bridge between your component's logic and the view.
📄️ Conditionals
Property binding and Event binding are powerful mechanisms, but you will often need to branch between multiple options.
📄️ Loops
You will often need to display lists — such as recipes or ingredients. Angular’s @for block is the declarative way to do that.
📄️ Styling
Each Angular component can define its own styles, scoped to that component's template.