#28 Non-Related Component Communication | Angular Component & Directives | A Complete Angular Course

Summary

This lecture explains how to pass data between sibling or non-related components in Angular. The instructor walks through a scenario where user input in a search component needs to filter products displayed in a separate product list component. Since these components are not related, the lecture covers using a combination of custom event binding and property binding, utilizing the @Input and @Output decorators. The instructor also demonstrates how data flows through a container component to achieve communication between the two sibling components.

Takeaways

• 😀 Custom property binding allows passing data from a parent component to a child component using the @Input decorator.
• 😁 Custom event binding allows passing data from a child component to a parent component using the @Output decorator.
• 😃 Passing data between sibling components or unrelated components requires a combination of property binding and event binding.
• 🙂 In the example, the search box component uses two-way data binding to capture user input and store it in the 'searchText' property.
• 😄 The product list component contains an array of products, which are displayed based on the search input.
• 😆 Data from the search component is passed to the container component using custom event binding, then passed to the product list component using property binding.
• 😉 The process of passing data between unrelated components is achieved by first passing the data from the child to the container (parent) component, then from the container to another child component.
• 😊 The @Output decorator, along with the EventEmitter class, is used to emit data from the search component to the parent component.
• 😎 The search functionality filters the products based on the user’s input, displaying only the relevant products in the product list component.
• 😇 While services could be used to simplify the process, the lecture focuses on solving the problem using event and property binding without introducing services yet.

Q & A

What is the main topic discussed in this lecture?

The lecture discusses how to pass data between non-related or sibling components in Angular, using custom event binding and custom property binding.

How is data passed from a parent component to a child component in Angular?

Data is passed from a parent component to a child component using custom property binding and the `@Input` decorator.

How is data passed from a child component to a parent component in Angular?

Data is passed from a child component to a parent component using custom event binding and the `@Output` decorator.

What challenge arises when trying to pass data between sibling components?

Sibling components do not have a direct parent-child relationship, so the standard `@Input` and `@Output` methods cannot be directly applied for data transfer between them.

What is the approach suggested for passing data between sibling components?

The approach involves using a combination of custom event binding to pass data from one sibling component (SearchComponent) to the parent component (ContainerComponent) and then using custom property binding to pass data from the parent component to the other sibling component (ProductListComponent).

What is the purpose of the `EventEmitter` class in this context?

The `EventEmitter` class is used to create and emit events that carry data (in this case, the search text) from the SearchComponent to the parent ContainerComponent.

Why is the `@Output` decorator used in this lecture?

The `@Output` decorator is used to indicate that the SearchComponent is going to emit an event, allowing the parent component (ContainerComponent) to listen for that event and receive data.

How does the product filtering work based on the search text?

The ProductListComponent receives the search text via property binding, and the list of products is filtered to show only those products whose names include the search text entered by the user.

How is the data emitted from the search component when the user types in the search box?

When the user types in the search box, an `input` event is triggered. The custom `onSearchTextChanged` event is raised in the SearchComponent, emitting the entered value (search text) to the parent component.

What Angular directive is used to conditionally display the filtered product list?

The `*ngIf` directive is used to conditionally display the products that match the search text. It checks if the product name includes the search text, and if so, the product is displayed.

What would happen if the search text is empty?

If the search text is empty, all products are displayed because a condition in the `*ngIf` directive checks if the search text is an empty string and, if true, displays all products.