Angular2 How to Define Input Property in Plain JS

Question

I want to specify an Input property for my component using plain JS (not typescript).

The only documentation I can find is this (which is from the Angular2 cheat sheet):

ng.core.Input(myProperty, myComponent); 
//Declares an input property that we can 
//update via property binding (e.g. <my-cmp [my-property]="someExpression">).

I've tried this in my component's constructor:

.Class({
   constructor: function () {    
       ng.core.Input(this.name, this);        
   }
});      

However, it does not work (no errors are reported either).

What am I doing wrong?

Answer 1

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.