Angular 2 external inputs

Question

Please can you help? Just starting with Angular 2 and having the following issue.

My component is below:

@Component({
    selector: 'myapp',
    inputs: ['mynumber']
})
@View({
    template: `<p>The next number is {{ mynumber + 1 }}</p>'
})
export class App {
    mynumber: number;
}
bootstrap(App);

Inside my HTML:

<myapp [mynumber]='41'></myapp>

But when run I get the following:

The next number is NaN

It looks simple but I am missing something. What I am trying to achieve is passing a value from outside the app into it.

Thanks.

Answer 1

You can't specify property bindings (inputs) for the root component of your application. If you really want to specify some binding for it you should use additional component. See this plunkers.

import {Component, Input} from 'angular2/angular2'

@Component({
  selector: 'myapp',
  template: `   
    <p>The next number is {{ mynumber + 1 }}</p>
  `
})
class App {
  @Input() mynumber: number;
}

@Component({
  selector: 'root',
  directives: [App],
  template: `
    <myapp [mynumber]="41"></myapp>
  `
})
export class Root {}

Answer 2

A workaround is reading it directly using ElementRef:

constructor(elementRef:ElementRef) {
  console.log(elementRef.nativeElement.getAttribute('someattribute'); 
} 

and use it like

<myapp mynumber='41'></myapp>

See also https://github.com/angular/angular/issues/1858