Thanks Jason for your fast response.
I sorted out my own question with dynamic component loader. Here is my temporary solution, which kind of work but is clumsy. Thanks for your suggestion above, which make small twist of local variables alot easier than making lots of sub component just for injecting into the kendo template.
...
try {
this.createUIControls();
let topNavBarTop = $("#topNavBarTop");
this.loader.loadNextToLocation(childComponent, this.elementRef)
.then((result:ComponentRef) => {
this.childComponent=result.instance;
this.childComponent._test="xxx";
topNavBarTop.append(result.location.nativeElement);
});
window['TopNavBarComponent'] = this; //not the best way to get the component reference to the global scope. Is there another way?
}
catch (e) { console.log(e);}//Log.error(e); }
finally {
}