For these cases you have inputs and outputs properties. Note that for the TS case the annotations are singular (Input and Output) and with plain JS they're plural (inputs and outputs).
var Children = ng.core.
Component({
inputs : ['myValue'], // Equivalent to @Input('myValue')
outputs : ['emitValue'] // Equivalent to @Output() emitValue;
}).
Class({
constructor: function() {
// Initialize emitValue
this.emitValue = new ng.core.EventEmitter();
},
// Available at ngOnInit lifecycle
ngOnInit : function() {
console.log(this.myValue);
},
// Value that the component will emit
emit : function() {
this.emitValue.emit('This is some value from children');
}
});
With inputs you can use the syntax [internalValue: externalValue], which basically would give you the possibility to do this
<another-cmp [externalValue]="someExpression"></another-cmp>
.Component({
inputs : ['internalValue: externalValue']
})
.Class({
ngOnInit : function() {
// 'internalValue' contains 'externalValue' value
console.log(this.internalValue);
}
})
And for the parent component
var Parent = ng.core.
Component({
selector: 'cmp',
template : `
<another-cmp [myValue]="myValue" (emitValue)="printValue($event)">
</another-cmp>
What does my children have to say? {{childrenValue}}
`,
directives : [Children]
}).
Class({
constructor: function() {
this.myValue = 'Some value to pass to children';
},
printValue : function(value) {
this.childrenValue = value;
}
});
Here's a plnkr demonstrating the case. I hope it helps.
