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

this start page, rendered on backend (instead of 'propval' there variable containing json-configuration):

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

this component handles '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 result, in console get:

constructor undefined ngoninit undefined 

how read userdata property? perhaps not done in appcomponent, since application selector not rendered inside app.component.html. application selector rendered on backend.

the question vega shared points out bootstrap , entry components cannot use input bindings. (i did not find source code, reasoning entry component should not have parent, makes sense not use input bindings.)

the accepted answer uses elementref data attribute, approach should work case well.

import {elementref} '@angular/core';  constructor(private _ref: elementref) {}  ngoninit() {     this.userdata = this._ref.nativeelement.getattribute('userdata'); } 

sample plunker

other solutions might work or others: configure injectiontoken (doc) or use service.