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';
@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. |
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:
References: