#25 @Input: Custom Property Binding | Angular Components & Directives | A Complete Angular Course

Summary

This Angular tutorial teaches how to use the @Input decorator for custom property binding between parent and child components. The instructor demonstrates creating a product component to represent individual products in a product list, showing how to loop over an array of products using the NGFor directive. The lesson covers passing data from the parent component to the child component using custom property binding, and transferring HTML and CSS for proper layout. By the end, the products are displayed with correct design and functionality. It's a hands-on guide to component communication in Angular.

Takeaways

• 😀 In this lecture, we focus on custom property binding in Angular using the @Input decorator.
• 💻 A new component called 'Product' is created to represent individual products in the product list.
• 📂 Navigation in VS Code is shown: moving from the source folder to the app, container, and product list folders to create the new product component.
• 🔨 The 'ng generate' command is used to create the 'Product' component, which includes a TypeScript, HTML, and CSS file.
• ✂️ The HTML code for displaying the product is transferred from 'product list component.html' to 'product component.html'.
• 💡 The @Input decorator allows data to be passed from the parent component ('ProductList') to the child component ('Product').
• 🛠️ Custom property binding with the @Input decorator is demonstrated to pass data between the components.
• 📜 The 'product' property is defined in the product component and decorated with the @Input decorator to receive data.
• 🔄 The 'ngFor' directive is used to loop over the 'products' array and bind each product object to the 'Product' component.
• 🎨 Styling is transferred from 'product list component.css' to 'product component.css', ensuring the products are properly styled on the webpage.

Q & A

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

The @Input decorator in Angular is used to pass data from a parent component to a child component. It allows for custom property binding, enabling communication between components that have a parent-child relationship.

How does Angular use the *ngFor directive in the Product List component?

The *ngFor directive is used to loop over an array of products in the Product List component. For each item in the array, a corresponding HTML block is repeated, dynamically rendering a list of products on the UI.

Why is the Product component created separately instead of keeping the HTML inside the Product List component?

The Product component is created separately to represent a single product, promoting modularity and reusability. Instead of repeating the product HTML for each item, a reusable Product component is used within the Product List component.

What is the role of the property binding syntax (square brackets) in Angular?

In Angular, square brackets are used for property binding to bind a property in the parent component to an input property in the child component. This allows data to flow from the parent to the child.

Why does the developer remove the *ngFor directive from the Product component HTML?

The *ngFor directive is removed from the Product component because the looping logic is handled in the Product List component. The Product component is responsible for rendering a single product, not iterating over the entire array.

What changes are made to the Product component to receive data from the Product List component?

A property called 'product' is created in the Product component and decorated with @Input. This allows the Product List component to pass the current product object to the Product component using custom property binding.

How does the Product List component pass a product object to the Product component?

In the Product List component's HTML, the app-product selector is used with property binding to bind the current product from the *ngFor loop to the 'product' input property of the Product component.

Why was the strict check for TypeScript removed from tsconfig.json?

The strict check was temporarily disabled because the developer encountered a compilation error related to TypeScript's strict type checking. Disabling it resolved the error, though this is not a best practice for long-term use.

What type of object is initially assigned to the 'product' property in the Product component?

The 'product' property is initially assigned an anonymous object type with properties like 'id', 'name', and 'discountPrice'. These properties help define the structure of the product object passed from the Product List component.

Why are the styles for the product card moved from Product List to Product component CSS?

The styles are moved from the Product List component to the Product component to maintain modularity. Since the product display is handled by the Product component, its styles should also be kept in the same component for better organization.