input / output Angular
Estimated reading time: 1 minuteinput / output
input / output is aslike props if compare other js library .
- input = receive data (parent to child)
- output = return back data (child to parent)
input task
// parent.html
// loacl variable from parent
<input type="text" #parentValue (keyup)="0">
<input-example [myValue]="parentValue.value"></input-example>
// or data from parent variable
<input-example [myValue]="parentValue"></input-example>
// children.ts
@Component({
inputs: ['myValue'],
})
<!-- children.html -->
<h1>{'{myValue}}</h1>
output task
//child.ts
import { EventEmitter } from '@angular/core';
@Component({
outputs: ['myValue'],
})
myValue = new new EventEmitter<string>();
<!-- child.html -->
<input type="text" #childInput (keyup)="onChange(childInput.value)">
<!-- parent.html -->
<input-example (onChange)="childData = $event"></input-example>
<h1>{'{childData}}</h1>