Passing data from parent to child through input binding

2. Listening to events from the child component in the parent component

In angular, we use input bindings to pass data from parent to child components. In our example code above, we will pass data from the app component to the alpha component by using an input decorator. Consider the following code changes –

HTML

<!--comp-alpha.component.html-->

<div style="
    display: flex;
    background-color: lightgreen;
    padding: 1rem;
    height: 20rem;
    flex-direction: column;
    margin: 2rem;
  ">
    <div style="display: flex; flex-direction: row; justify-content: center">
        This is alpha component
    </div>
    <div style="display: flex; flex-direction: column; justify-content: center">
        <div style="
        display: flex;
        margin-top: 1rem;
        margin-bottom: 1em;
        justify-content: center;
      ">
            <input type="text" name="alpaText" id="alphaText" [(ngModel)]="alphaText" />
        </div>
        <div style="
        display: flex;
        margin-top: 1rem;
        margin-bottom: 1em;
        justify-content: center;
      ">
            Your Text - <b>{{ alphaText }}</b>
        </div>
        <div style="display: flex; flex-direction: row">
            <div style="margin-left: 0.6rem; margin-right: 0.3rem">
                <button>Pass to parent component</button>
            </div>
            <div style="margin-right: 0.6rem; margin-left: 0.3rem">
                <button>Pass to beta component</button>
            </div>
        </div>
        <div style="display: flex; flex-direction: column; padding: 0.5rem">
            <div style="padding-top: 0.5rem; padding-bottom: 0.5rem">
                <b>Whatever you see below is coming from parent component</b>
            </div>
            <div>{{ parentText }}</div>
        </div>
    </div>
</div>

HTML

<!--app.component.html-->


<div style="
    display: flex;
    background-color: aqua;
    padding: 1rem;
    /* height: 20rem; */
    flex-direction: column;
  ">
    <div style="display: flex; flex-direction: column; justify-content: center">
        <div style="display: flex; justify-content: center">
            This is parent component
        </div>
        <div style="display: flex; justify-content: center">
            <p>
                <input type="text" name="homeText" id="homeText" [(ngModel)]="homeText" />
            </p>
        </div>
        <div style="display: flex; justify-content: center">
            Your Text - <b>{{ homeText }}</b>
        </div>
        <div style="display: flex; justify-content: center">
            <p>
                <button style="margin-right: 1rem">Pass to alpha component</button>
                <button>Pass to beta component</button>
            </p>
        </div>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: center">
        <app-comp-alpha [textFromParent]="homeText"></app-comp-alpha>
        <app-comp-beta></app-comp-beta>
    </div>
</div>

JavaScript

//comp-alpha.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'app-comp-alpha',
    templateUrl: './comp-alpha.component.html',
    styleUrls: ['./comp-alpha.component.css'],
})
export class CompAlphaComponent implements OnInit {
    constructor() { }

    alphaText = 'Hello alpha!';

    ngOnInit(): void { }

    @Input('textFromParent') parentText = '';
}

Output:

Passing values from parent to child component

Here, we are using @Input() decorator to bind the property we want to pass from parent to child. In the comp-alpha.component.ts, we have added the following code

  @Input('textFromParent') parentText = '';

And, in the app.component.html, we are passing the value to this property –

 <app-comp-alpha [textFromParent]="homeText"></app-comp-alpha>

Component Communication in Angular

Angular, as a robust front-end framework, allows you to build complex and interactive web applications by creating reusable components. One of the key aspects of building such applications is effective communication between these components.

There are a lot of instances where we need to transfer data and events between angular components.

The communication can be between parent and child components or between sibling components. We will try out 3 methods to transfer data on our angular application.

Table of Content

1. Passing data from parent to child through input binding
2. Listening to events from the child component in the parent component
3. Using Services to pass data between sibling component

Tags:

#AngularJS-Basics #AngularJS #Web Technologies

Folder Structure:

2. Listening to events from the child component in the parent component

Passing data from parent to child through input binding

Output:

Component Communication in Angular

Similar Reads

Contact Us