Component communication

There are several ways that components can communicate with each other in Angular:

• Input and Output bindings
• ViewChild and ViewChildren
• Services
• Event bus

Let's take a closer look at input and output bindings with an example. Suppose we have a parent component that displays a list of items, and a child component that displays the details of a selected item. We want to be able to click on an item in the list and display its details in the child component. Here's how we could set that up:

    <app-item-list [items]="items" (itemSelected)="onItemSelected($event)"></app-item-list>
    <app-item-details [item]="selectedItem"></app-item-details>
    
    items = ['Item 1', 'Item 2', 'Item 3'];
    selectedItem: string;
    
    onItemSelected(item: string) {
      this.selectedItem = item;
    }
    
    // item-list.component.html
    <ul>
      <li *ngFor="let item of items" (click)="onItemClick(item)">{{ item }}</li>
    </ul>
    
    // item-list.component.ts
    @Input() items: string[];
    @Output() itemSelected = new EventEmitter<string>();
    
    onItemClick(item: string) {
      this.itemSelected.emit(item);
    }
    
    // item-details.component.html
    <div *ngIf="item">{{ item }}</div>
    
    // item-details.component.ts
    @Input() item: string;

In this example, the parent component passes the list of items to the item-list component using an input binding. The item-list component emits an output binding when an item is clicked, which the parent component listens for and updates the selected item. The item-details component receives the selected item using an input binding and displays its details.

This is just one example of how components can communicate with each other in Angular. By using these various techniques, we can create powerful and flexible user interfaces with many moving parts.