Load ngFor inside insertAdjacentHTML

Question

I am attaching element inside template dynamically by user click, this way:

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);
}

However the {{lup.name}} doesn't print the actual value but as how it is typed there. How to make it works? Anybody?

UPDATE:

I've tried with this way, but still it's said that

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

Please don't do so. I wonder why you need this framework if you write such code — yurzui, Dec 05 '17 at 13:51
@yurzui, I am doing much like that. How shoud it be, and how to make the problem solve? Many thanks in advance. — Al Kasih, Dec 05 '17 at 13:52
This part is unique, so it is actually not much related to framework. The aim of the framework trully is for the hashing. — Al Kasih, Dec 05 '17 at 13:53

score 1 · Answer 1 · answered Dec 05 '17 at 15:16

1

Angular doesn't process Angular specific markup like matching component or directive selectors or bindings for dynamically added HTML.

Angular generates code for these things when it compiles components. What is not in a components template when the component is compiled, is completely ignored by Angular.

What you can do is to dynamically create and compile Angular components at runtime. For more details see How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

answered Dec 05 '17 at 15:16

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you very much to come here with respond. I am a little bit confused how to do this angular way like what you said about 'DynamicComponentLoader ' in the previous answer I commented out, I am thinking if it is related with that. – Al Kasih Dec 05 '17 at 15:21
You would first need to create a component dynamically as mentioned in the linked answer above, then you can add the component to another component using `ViewContainerRef.createComponent` (previously `DynamicComponentLoader`) – Günter Zöchbauer Dec 05 '17 at 15:23
Well, I need to import `browser` module too there to make it works. – Al Kasih Dec 05 '17 at 17:15
Now, I am just wondering why angular make simple thing so complicated, while we can't say we need to use another framework for things like this, it is not programmatically stament of programmer. – Al Kasih Dec 05 '17 at 17:16
Wait, the data is not inserted inside the parents. – Al Kasih Dec 05 '17 at 17:36
Perhaps it's your expectations. Angular 2+ is just entirely different than previous Angular versions. They put a lot of effort into optimization at build time so that the browser has less work to do. A large chunk of the Angular framework isn't loaded into the browser anymore because it's done when you create the deployable. If the still need to dynamically create Angular stuff at runtime you pay a penalty, but they made some assumptions about what approach benefits more people and if your app heavily depends on dynamic generated components Angular might just not be the right choice. – Günter Zöchbauer Dec 05 '17 at 18:30
This is for internal system only, while only admin can have this functionality, that's why I need this kind of CMS with angular. You know, CMS is often having dynamic element for user. – Al Kasih Dec 05 '17 at 20:11

Load ngFor inside insertAdjacentHTML

1 Answers1

Linked