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

Advanced:

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:

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:

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, 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

  1. In the parent's template, bind the parent's method to the child's event.

  2. 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:

References: