Angular2 Injecting app variable from html page to app

Question

I want to pass variables from the including html page to the my app.

Note: I know how to pass between components but the question is from outside the app!

Example My html page:

  <body>
    <my-app customerId="123">Loading...</my-app>
  </body>

and i want to be able to use "customerId" variable in my app.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { 
  customerId;
}

How can this be done?

I tried with input but with no success.

  @Input("customerId") customerId;

Thanks.

score 1 · Accepted Answer · answered Apr 19 '16 at 15:47

@Input() bindings are not supported on the root component.

As a workaround you can use

constructor(public elementRef: ElementRef) {
    var native = this.elementRef.nativeElement;
    var myattr = native.getAttribute("myattr");
}

1 Answers1