When a user clicks, I dynamically attach an element inside a template like this:
this.optionValue = [];
youClickMe(){
var moreput = '';
moreput += '<select">';
moreput += '<option *ngFor="let lup of optionValue">{{lup.name}}</option>';
moreput += '</select>';
var pElement = document.querySelector('.somewhereyoubelong');
pElement.insertAdjacentHTML('beforeend', moreput);
}
My issue is that the {{lup.name}} is not displaying the actual value but rather as it is typed there. Does anyone know how to make it work correctly?
UPDATE:
I have attempted another approach, but encountered this error message:
const templating = '<p *ngFor="let sizeCat of sizeCategoryBySubCategory" [value]="sizeCat.id">{{sizeCat.name}}</p>';
const tmpCmp = Component({template: templating})(class {});
const tmpModule = NgModule({declarations: [tmpCmp]})(class {});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule).then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, [], null, this._m);
//cmpRef.instance.testText = 'B component';
cmpRef.instance.sizeCategoryBySubCategory = [
{ id:1, name: 'a'},
{ id:2, name: 'b'},
];
this._container.insert(cmpRef.hostView);
});
Property binding ngForOf not used by any directive on an embedded template