How to read the property of a application selector at the time of initialization?

Question

This is my start page, it is rendered on the backend (instead of 'propval' there will be a variable containing the json-configuration):

<%- include('template/head'); %>
<application [userdata]='"propval"'>
    Loading...
</application>
<%- include('template/foot'); %>

This is my component that handles the 'application' selector:

@Component({
    moduleId: module.id,
    selector: 'application',
    templateUrl: './app.component.html',
    providers:[
        ProgressBar
    ]
})
export class AppComponent implements OnInit {

    public userdata;

    constructor(public progressBar :ProgressBar, private router: Router) {
        console.log("constructor",this.userdata);
    }

    public async ngOnInit() {
        console.log("ngOnInit",this.userdata);
    }

}

As a result, in the console I get:

constructor undefined
ngOnInit undefined

How to read userdata property? Perhaps this is not will done in AppComponent, since application selector is not rendered inside the app.component.html. application selector rendered on the backend.

Did you tried to add an input for this property? @Input() userdata; — galvan, Sep 10 '17 at 11:38
Would this help ?: https://stackoverflow.com/questions/38382892/is-it-possible-to-pass-an-input-value-to-app-component-in-angular-2 — Vega, Sep 10 '17 at 12:48
You can't feed properties into your app component like this, a config type object should be provided in a service and injected into the component — bryan60, Sep 10 '17 at 19:14

score 1 · Accepted Answer · answered Sep 10 '17 at 19:08

The question Vega shared points out that bootstrap and entry components cannot use input bindings. (I did not find the source code, but by reasoning that an entry component should not have a parent, it makes sense that they would not use input bindings.)

The accepted answer uses ElementRef to get the data attribute, that approach should work for your case as well.

import {ElementRef} from '@angular/core';

constructor(private _ref: ElementRef) {}

ngOnInit() {
    this.userdata = this._ref.nativeElement.getAttribute('userdata');
}

Sample plunker

Other solutions that might work for you or others: configure an InjectionToken (doc) or a use a service.

How to read the property of a application selector at the time of initialization?

1 Answers1