Request For Quote
Components Interactions Using Input and Output Decorators in Angular
You can refer the example here:https://stackblitz.com/edit/angular-pvfb46 Step 1:Let us start by creating an angular applicationInstall the angular/cli globally in your systemFor this runnpm i -g…

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.