Components and Data Binding in Angular
In Angular, components are the building blocks of an application. They are responsible for rendering the UI and handling user input.
Data binding is the process of connecting the data in your application to the UI. This allows you to update the UI automatically when the data changes.
What are Components?
Components are classes that are annotated with the `@Component` decorator. They have a template that defines the UI for the component and a class that defines the behavior of the component.
The template for a component is an HTML file that contains Angular directives. Directives are instructions that tell Angular how to modify the behavior of the HTML elements in the template.
The class for a component is a TypeScript file that contains the properties, methods, and events of the component.
What is Data Binding?
Data binding is the process of connecting the data in your application to the UI. This allows you to update the UI automatically when the data changes.
There are two types of data binding in Angular:
*️⃣Property binding: Property binding binds a property in the component to an expression. The expression can be a value, a function, or a property from another component.
*️⃣Event binding: Event binding binds an event in the component to a handler function. The handler function is called when the event occurs.
How to Use Components and Data Binding
To use components and data binding, you need to create a component and add it to your application. You can then bind the data in the component to the UI using property binding or event binding.
Here is an example of a component that displays a list of items:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{
name: 'Pizza',
price: 10
},
{
name: 'Burger',
price: 5
},
{
name: 'Fries',
price: 2
}
];
ngOnInit() {
}
}
The `items` property is an array of items. The `ngOnInit()` method is called when the component is initialized.
The template for the `AppComponent` is as follows:
<h1>Menu</h1>
<ul>
<li *ngFor="let item of items">
<a [href]="'/item/' + item.id">
{{ item.name }}
</a>
<span> {{ item.price }} </span>
</li>
</ul>
The `*ngFor` directive iterates over the `items` array and creates a list item for each item. The `href` attribute of the `a` tag specifies the URL of the page for the item. The `span` tag displays the price of the item.
The `{{ item.name }}` and `{{ item.price }}` expressions are property bindings. They bind the `name` and `price` properties of the current item to the corresponding elements in the template.
In Conclusion;
Components and data binding are essential features of Angular. They allow you to create dynamic and interactive web applications.
If you are interested in learning more about Angular components and data binding, I recommend checking out the official Angular documentation. You can also find a lot of helpful resources on the Angular community website.
I hope you have now learnt the basics of Angular components and data binding.
