Inputs & Outputs

@Component has the attribute value Selector,template (templateurl), Styles (Styleurl), directives,proviers,inputs,outputs.

What are inputs and outputs used for???

First.component.ts

Import {Component} from 'Angular2/core'Import {fistchildcomponent} from './firstchild.component'@Component ({Template: '<divclass="Parent"> "text"(KeyUp) ="0"/></div> <divclass=" Child"[postvalue]="Parentinput.value"(getValue) ="Getchange ($event)"> </div> </div>', Styles: ['. Parent {padding:10rem 2rem 2rem; background-color: #ececec;} . child {padding:2rem; background-color: #eee; BORDER:1PX Solid # the; Margin:2rem0;} '], directives: [Fistchildcomponent]}) exportclassfirstcomponent { PublicChildval:string; Getchange (val) { This. Childval =Val; }}

Firstchild.component.ts

Import {Component, eventemitter} from 'Angular2/core'@Component ({selector:'. Child', Template: '<divclass="Childnode"> "text"#childInput (KeyUp) ="OnChange (Childinput.value)"/></div> </div>', inputs: ['Postvalue'], outputs: ['GetValue']}) exportclassfistchildcomponent {getValue=Neweventemitter<string>(); OnChange (val) { This. Getvalue.emit (Val); }}

Inputs and outputs are used to receive data from the parent module and send data to the parent module, [Postvalue] corresponds to inputs (GetValue) in the parent modules outputs

One point to keep in mind is that the parent module is used when referring to a submodule [], and the parent module is used when referring to the Submodule ().

Inputs and outputs can be modified to @input and @output

Firstchild.component.ts modified to:

Import {Component, Eventemitter, Input, Output} from 'Angular2/core'@Component ({selector:'. Child', Template: '<divclass="Childnode"> "text"#childInput (KeyUp) ="OnChange (Childinput.value)"/></div> </div>    `}) Exportclassfistchildcomponent {@Input ('Postvalue') Postvalue:string; @Output ('GetValue') GetValue =Neweventemitter<string>(); OnChange (val) { This. Getvalue.emit (Val); }}

Inputs & Outputs