document setAttribute ngModel Angular

Question

I am trying create an input element from typescript to html in angular 4. But when I try put [(ngModel)] not works. How I do that method ? Someone know how ?

createElement() {
    this.input = document.createElement('input');
    this.input.setAttribute('matInput', '');
    this.input.setAttribute('placeholder', 'Tema');
    this.input.setAttribute('[(ngModel)]', 'module.theme');
    this.input.setAttribute('name', 'theme');

    return (<HTMLDivElement>(document.getElementById('ejemplo').appendChild(this.input)));
  }

Günter Zöchbauer · Accepted Answer · 2017-10-17 18:05:19Z

1

Something like

 this.input.setAttribute('[(ngModel)]', 'module.theme');

is not supposed to work. Property/attribute bindings and component/directive instantiation only happens for markup added to a components template statically.

If it is added dynamically it won't have any effect. If you need this, you can create and compile a component at runtime and add that component dynamically (to a statically defined ViewContainerRef).

Alternatively you can use imperative code to update the DOM.

answered Oct 17, 2017 at 18:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daniol Over a year ago

And how to do the "create and compile a component" thing?

Günter Zöchbauer Over a year ago

The link in this answer stackoverflow.com/a/46578036/217408 seems to be recent enough. There are several other related questions/answers on SO.

daniol Over a year ago

Thanks, but that creates the component from a html string, not from a HTMLElement object. Would be possible without calling .innerHTML? And how to do it in a directive (having access only to the ElementRef and not ViewContainerRef)?

Günter Zöchbauer Over a year ago

Sorry, I can't help you with this topic. I never used it myself.

Collectives™ on Stack Overflow

document setAttribute ngModel Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related