#26 Understanding Input Decorator | Angular Components & Directives | A Complete Angular Course

Summary

In this lecture, the instructor delves deeper into Angular's custom property binding and the @Input decorator by creating a filter component within a product list component. The process involves generating a new component, implementing radio buttons for filtering products by stock status, and displaying the total count of products in stock and out of stock. The video highlights how data is passed from the parent (product list) component to the child (filter) component using the @Input decorator. The lecture concludes by hinting at the next topic: passing data from child to parent using custom event binding.

Takeaways

• 😀 Custom property binding and the @Input decorator allow passing data from a parent component to a child component.
• 💻 A new filter component is created in the product list component using the Angular CLI command 'ng generate component filter'.
• 🔧 The filter component replaces a basic paragraph with radio buttons for selecting in-stock and out-of-stock products.
• 🔢 Properties 'all', 'in stock', and 'out of stock' are added in the filter component to track the number of total, in-stock, and out-of-stock products.
• 💡 String interpolation is used to display the values of the properties in the filter component's template.
• 🚀 The @Input decorator is used to bind parent component properties (like product counts) to the child component (filter component).
• 📊 The total number of products is calculated in the product list component by using 'products.length' and passed to the child filter component.
• 🛠 The 'totalProductInStock' and 'totalProductOutOfStock' properties in the product list component filter the products based on their availability using 'isInInventory'.
• 🔗 Data binding from the parent to the child component is done by assigning the calculated values to the filter component's properties.
• 🎯 In the next lecture, the focus will be on passing data from the child component to the parent component using custom event binding.

Q & A

What is the purpose of using the `@Input` decorator in Angular?

The `@Input` decorator in Angular is used to bind properties in a child component to values passed from a parent component. This allows the child component to receive data from the parent, enabling better modularization and communication between components.

How do you create a new component using the Angular CLI?

To create a new component using the Angular CLI, you can use the command `ng generate component <component-name>`. For example, `ng generate component filter` creates a new component called `filter`.

Why is the `.spec.ts` file deleted after creating a new component?

The `.spec.ts` file is used for testing purposes. If testing is not required or planned for a particular component, it can be safely deleted to reduce clutter in the project directory.

How is a newly created component added to an existing parent component?

To add a newly created component to a parent component, you use the child component's selector as a custom HTML tag in the parent component's template. For example, `<app-filter>` can be added to the parent component's HTML file to render the `FilterComponent`.

What is the purpose of using radio buttons in the filter component?

The radio buttons in the filter component are used to filter products based on their stock status. They allow users to select between products that are 'In Stock' or 'Out of Stock'.

What is the use of the `filter` method in the context of the script?

The `filter` method is used to filter the `products` array in the parent component based on the `isInInventory` property. It helps in categorizing products into 'In Stock' and 'Out of Stock' arrays by checking if `isInInventory` is true or false.

How do you pass data from a parent component to a child component using the `@Input` decorator?

To pass data from a parent component to a child component, you define a property in the child component decorated with the `@Input` decorator. Then, in the parent component's template, bind the value to this property using property binding syntax, like `<app-filter [all]='totalProductCount'>`.

Why is string interpolation used in the HTML templates?

String interpolation is used in Angular templates to dynamically render values stored in component properties. It allows you to display component data in the template using `{{propertyName}}` syntax.

How are the total product counts calculated in the parent component?

The total product counts are calculated using the `length` property for the `products` array. `products.length` returns the number of items in the array. Similarly, the `filter` method is used to create filtered arrays for 'In Stock' and 'Out of Stock' products, and their lengths are then calculated.

What will be covered in the next lecture?

The next lecture will cover how to pass data from a child component to its parent component using custom event binding.