Our Work

Components Interactions Using Input and Output Decorators in Angular

Updated today

You can refer the example here:https://stackblitz.com/edit/angular-pvfb46

Step 1:
Let us start by creating an angular application 
Install the angular/cli globally in your system
For this run 
npm i -g @angular/cli 
This command installs angular cli globally

After executing the above command the system asks for certain conditions which you can mark as default and continue
Now run the command
ng new inputout 

This create a new project by name inputoutput
In order to start angular you need to run the command
ng  serve --o

This opens our inputoutput project typically at http://localhost:4200/ if  you are running  your application on your local machine

Step2:
Creating Child Component.
Here we consider the app.component as the parent component
For creating a child component run
ng g c child 
which refers to generate a component in angular 
g=generate
c=component

This generates a folder src/app/child which contains our child component files.

The child component is by default inserted in to the ./src/app/app.module.ts when we execute the above command for creating the child component

Step 3:
Now load the child component from the parent component template (./inputoutput/src/app/app.component.html) by including the child component selector.

<div>
<app-child></app-child>
</div>

This will load the child component template(./inputoutput/src/app/child/child.component.html) data  on to your browser.
Typically you should be seeing child works! On your browser.

Step 4:
@Input() decorator is used to pass data into the declared property from a template binding expression.
For this to be done please create an input property setter in your app.component.html file with the following

./src/app/app.component.html

<div>
   From Parent <input type='text' #parentRef (change)="myChange(parentRef.value)"/>
   <app-child [tochild]="childValue"></app-child>
</div>

/var/www/inputoutput/src/app/app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'inputoutput';
childValue:string
myChange = (val) => {
     this.childValue = val
}
}

So when ever the changes occur in the childValue Property will effect to the child component by binding its toChild property.

/var/www/inputoutput/src/app/child/child.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() tochild
constructor() { }
ngOnInit() {
}
}

The tochild is an input property will be detech the value from the parent on changing the text in the app.components.html.

We can take a look at this in the browser by pasting the following code

/var/www/inputoutput/src/app/child/child.component.html

<p>
    Value from the parent is this  {{ tochild }}
</p>

So when ever the parent text field change it changes the tochild variable which falls in to the child.component.html due to interpolation concept 
Step 5:
@Output() decorator is used to stream out the events of declared properties and towards the handler in a template binding statement.
The child component emits the event and the Parent component binds to the event properties and reacts to those events.
./src/app/child/child.component.html

<input type='text' #childRef (change)='myChange(childRef.value)'>

./inputoutput/src/app/child/child.component.ts

@Output() toparent = new EventEmitter<boolean>()
…………….
myChange(value)
{
  this.toparent.emit(value) //emitting event to the parent with value
}

/var/www/inputoutput/src/app/app.component.html

<app-child [tochild] ="childValue" (toparent)="changeInChild($event)"></app-child>//parent listening to the emitted event

/var/www/inputoutput/src/app/app.component.ts

parentValue:string
…………………..
changeInChild(val) {
     this.parentValue = val //parent updating its typescript variable
}

./src/app/child/child.component.html

<div>
   From Child {{parentValue}} //displaying value coming from child using interpolation
</div>

In this way a child and parent components can interact with each other using input and output decorators.

Looking for Meanstack Developer?

Please Contact us if you have any Mean Stack Implementation requirements. Hire dedicated Mean Stack developers or Mean Stack Development services from KTree. KTree is Best offshore Web & Mobile development company with extensive experience in Angular Development

Request For Quote

Tags

    No tag results found for this post