Angular Features (2-1) --- Component Interaction (1) by @Input/@Output

Note: This article was published on 12/08/2024.

This series of articles will discuss the major feafures for Angular. The way to discuss could be AI in concept + Code Demo in StackBlitz | Instant Dev

Angular Features (0) --- What is Angular
Angular Features (1) --- Data Binding: Data Transfer inside Component
Angular Features (2) --- Component Interaction
- Angular Features (2-1) --- Component Interaction (1) by @Input/@Output --- this article

Advanced:

Angular Features (A-1) --- Difference between Observable and Promise

Note:

Since the concept of component interaction here is with similar or same mechanizm or funcationality as view variable transfer data between MVC controllers, saytherefore, I put the other article series of View Variables in ASP.NET MVC here as references:

Razor Engine in MVC
View Variables in ASP.NET MVC
View Variables in ASP.NET Core MVC
Pass Data Across Views In .NET MVC
Partial, RenderParial, Action, RenderAction

A - Introduction

Angular is a component based platform and all components make up the application. The major mechanizim for Angular is the data trasferting, either within a component or between (among) components. This article will discuss the data transfer between different Angular components.

The content of this article:

A - Introduction
B - Send Data from Parent Component to Child Component
C - Sending Data from Child Component to Parent Component

B - Send Data from Parent Component to Child Component

The @Input() decorator in a child component or directive signifies that the property can receive its value from its parent component.

To use @Input(), you must configure the parent and child.

B - 1 - Configuring Child Component

To use the @Input() decorator in a child component class, first import Input and then decorate the property with @Input(), as in the following example.

import { Component, Input } from '@angular/core'; // First, import Input
export class ChildComponent {
  @Input() item = ''; // decorate the property with @Input()
}

In this case, @Input() decorates the property item, which has a type of string, however, @Input() properties can have any type, such as number, string, boolean, or object. The value for item comes from the parent component.

Next, in the child component template, add the following:

<p>
  Today's item: {{item}}
</p>

B -2 - Configuring Parent Component

The next step is to bind the property in the parent component's template. In this example, the parent component template is parent.component.html.

Use the child's selector, here <app-child>, as a directive within the parent component template.
Use property binding to bind the item property in the child to the currentItem property of the parent.

<app-child [item]="currentItem"></app-child>

In the parent component class, designate a value for currentItem:

export class ParentComponent {
  currentItem = 'Television';
}

With @Input(), Angular passes the value for currentItem to the child so that item renders as Television.

The following diagram shows this structure:

The target in the square brackets, [], is the property you decorate with @Input() in the child component. The binding source, the part to the right of the equal sign, is the data that the parent component passes to the nested component.

B - 3 - Code Demo in Stackblitz:

@Input & @Output - StackBlitz

C - Sending Data from Child Component to Parent Component

The @Output() decorator in a child component or directive lets data flow from the child to the parent.

@Output() marks a property in a child component as a doorway through which data can travel from the child to the parent.

The child component uses the @Output() property to raise an event to notify the parent of the change. To raise an event, an @Output() must have the type of EventEmitter, which is a class in @angular/core that you use to emit custom events.

To use @Output(), you must configure the parent and child.

C - 1 - Configuring the child component

The following example features an <input> where a user can enter a value and click a <button> that raises an event. The EventEmitter then relays the data to the parent component.

Import Output and EventEmitter in the child component class:

import { Output, EventEmitter } from '@angular/core';

In the component class, decorate a property with @Output(). The following example newItemEvent @Output() has a type of EventEmitter, which means it's an event.

@Output() newItemEvent = new EventEmitter<string>();

The different parts of the preceding declaration are as follows:

Declaration parts	Details
`@Output()`	A decorator function marking the property as a way for data to go from the child to the parent.
`newItemEvent`	The name of the `@Output()`.
`EventEmitter<string>`	The `@Output()`'s type.
`new EventEmitter<string>()`	Tells Angular to create a new event emitter and that the data it emits is of type string.

Create an addNewItem() method in the same component class:

export class ItemOutputComponent {

  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

The addNewItem() function uses the @Output(), newItemEvent, to raise an event with the value the user types into the <input>.

C - 2 - Configuring the child template

The following example features an <input> where aThe child's template has two controls. The first is an HTML <input> with a template reference variable, #newItem, where the user types in an item name. The value property of the #newItem variable stores what the user types into the <input>.

<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button>

The second element is a <button> with a click event binding.

The (click) event is bound to the addNewItem() method in the child component class. The addNewItem() method takes as its argument the value of the #newItem.value property.

C - 3 - Configuring the parent component

The AppComponent in this example features a list of items in an array and a method for adding more items to the array.

export class AppComponent {
  items = ['item1', 'item2', 'item3', 'item4'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

The addItem() method takes an argument in the form of a string and then adds that string to the items array.

C - 4 - Configuring the parent template

In the parent's template, bind the parent's method to the child's event.
Put the child selector, here <app-item-output>, within the parent component's template, app.component.html.

<app-item-output (newItemEvent)="addItem($event)"></app-item-output>

The event binding, (newItemEvent)='addItem($event)', connects the event in the child, newItemEvent, to the method in the parent, addItem().

The $event contains the data that the user types into the <input> in the child template UI.

To see the @Output() working, add the following to the parent's template:

<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

The *ngFor iterates over the items in the items array. When you enter a value in the child's <input> and click the button, the child emits the event and the parent's addItem() method pushes the value to the items array and new item renders in the list.

C - 5 - Code Demo in Stackblitz:

@Output - StackBlitz

References:

Angular - Sharing data between child and parent directives and components
Two-way binding
- Two-way binding with form controls
- Two-way binding between components
transfer data among angular components - Google Search
- Parent to Child: @Input()
- Child to Parent: @Output() & EventEmitter
- Unrelated Components: Shared Service
4 Methods to Share Data between Components in Angular
Passing Data Between Components in Angular
- @Input() Decorator
- @Output() Decorator
- Using a Service with a RxJS Subject
- Using a Service with a Signal
- State Management Tools
- Using a Backend API
- QueryParams
- Route Params
- Passing Data on Navigation
- LocalStorage and SessionStorage
- Cookies
Methods to Share Data Between Angular Components
- Parent-to-Child: Sharing Data via @Input
- Child-to-Parent: Sharing Data via @Output() and EventEmitter
- Unrelated Components: Sharing Data via a Service
- Child-to-Parent: Sharing Data via ViewChild
Angular: How to share Components data | j‑labs
- Input-Output
- Sharing Data by Subject from Service
- Sharing Data by NgRx Store
- Other Data Share Possibilities
  - Route parameters: Components can share data through route parameters by configuring the router to pass data between components using route parameters.
  - Local storage: Components can store and retrieve data from the local storage of the browser.
  - Session storage: Components can store and retrieve data from the session storage of the browser.
  - Cookies: Components can read and write data to cookies to share data.
Angular viewChild,viewChildren, contentChild (Full Guide)
Angular Data Sharing Techniques. This article covers several methods for… | by Sumanth M J | Medium
https://stackblitz.com/edit/behavior-subject-2019 --- passing data by service
ways to transfer data in angular - Google Search