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

Custom Property Binding in Angular

Introduction to Custom Property Binding

• The lecture introduces the concept of custom property binding using the @Input decorator in Angular, focusing on practical implementation within a product list component.

Creating a Product Component

• The instructor explains the need to create a new component called "Product" to represent individual products instead of repeating HTML code for each item in the products array.

• Steps are outlined for navigating through VS Code's terminal to generate the new Product component within the appropriate folder structure.

Setting Up the Product Component

• After generating the Product component, unnecessary files like spec.ts are deleted as unit tests are not being implemented at this stage.

• The instructor discusses transferring HTML from the product list component to the newly created product component and removing any structural directives like *ngFor.

Implementing Data Binding

• To pass data from parent (product list) to child (product), an explanation is provided on how to use @Input for custom property binding.

• The importance of establishing a parent-child relationship between components is emphasized, highlighting that data can be passed effectively using this method.

Defining Properties with @Input Decorator

• In order to receive data in the child component, a property named product is created and decorated with @Input, which allows it to accept values from its parent.

• The necessity of importing @Input from Angular core libraries is mentioned, along with setting up type definitions for better clarity and error handling.

Finalizing Component Setup

• Adjustments are made in both TypeScript and HTML files of the product component to ensure proper data flow and display.

Understanding Custom Property Binding in Angular

Configuring TypeScript Strict Mode

• The lecture begins with a review of the tsconfig.json file, where compiler-related configurations are stored. The strict mode is initially set to true, but it is changed to false for troubleshooting purposes.

Resolving Template Errors

• After modifying the strict setting, errors in the product.component.ts and product.component.html files are addressed. Specifically, an incorrect reference (prod) is corrected to product. This resolves existing template errors.

Utilizing Input Decorators

• A property named product is created in the child component and decorated with the @Input() decorator. This allows it to be used as an attribute on the component selector (app-product). This enables data binding from parent to child components.

Implementing Custom Property Binding

• In the parent component's template (product-list.component.html), the custom property binding syntax using square brackets is introduced. This allows values from the parent component to be passed down to the child component's property (product).

Data Flow Between Components

• The current product being iterated over by ngFor in the parent component is assigned to the child’s product property. However, type mismatches arise due to optional properties in TypeScript definitions that need alignment between parent and child components. Adjustments are made accordingly for compatibility.

Finalizing Component Integration

• After ensuring type compatibility by making certain properties optional, data flows correctly from parent to child components through property binding. The rendered products display correctly on the webpage after styling adjustments are made in CSS files associated with both components.

This structured approach highlights key concepts related to Angular's custom property binding while providing clear timestamps for further exploration of each topic discussed during this segment of instruction.