This may sound dumb, but you cant do this with the root component (my-app).. you need to do this in a child component. Since my-app is the entire angular application.
e.g.
src/my-component.ts file
import {Component, Input} from '@angular/core' @Component({ selector: 'my-component', providers: [], inputs: ['a', 'b', 'c', 'd', 'e', 'f'], template: ` <div> <h2>Hello {{name}}</h2> inputs: {{inputs | json}} <br/> a:{{a}} b:{{b}} c:{{c}} d:{{d}} e:{{e}} f:{{f}} </div> `, directives: [] }) export class MyComponent { constructor() { this.name = 'Angular2 (Release Candidate!)'; } } src/app.ts file
//our root app component import {Component, Input} from '@angular/core' import { MyComponent } from './my-component'; @Component({ selector: 'my-app', template: ` <my-component a="1" b="2" c="3" d="4" e="5" f="5"> </my-component> `, directives: [ MyComponent ] }) export class App { } Also, [a]="1" tries to look for a variable called 1 in the class context and evaluate it to get its value.. while a="1" gets the value "1" as a string.
So, having [a]="myVariable" would get whatever value is in myVariable, while a="myVariable" will pass a string literal with the value "myVariable"
Plunker: https://plnkr.co/edit/DhHgED?p=preview
Makes sense?
Edit:
To my knowledge, you cant define inputs dynamically since angular2 compiler needs to know before hand the component definition.
