如何从 Angular 组件中的变量显示 HTMLElement？

Question

I store a dynamically generated HTMLElement in a variable in my component class. I would like to display it, but I have no idea how is that possible. I tried it like this:

Inside the component class:

elem: HTMLElement;

In the template:

<ng-container *ngTemplateOutlet="elem"></ng-container>

I get this error:

TypeError: templateRef.createEmbeddedView is not a function

Answer 1

If you have a naked HTMLElement , there's nothing Angular-y you can do. NgTemplateOutlet expected a TemplateRef , not a vanila HTMLElement object.

To insert an HTML Element into the DOM, simply use the appropriate DOM method for that. Which one you'll use entirely depends on the place where you want to use it.

For example, you could do

const wrapper = document.querySelector('div.wrapper')
wrapper.append(el) // pass in your element

You can also grab the reference to the wrapper in a more Angular way, by adding an Angular reference in the template on the element you want to select,

<div class="wrapper" #wrapper></div>

and using ViewChild decorator on a property where you want Angular to assign the ElementRef to.

@ViewChild('wrapper', { static: true, read: ElementRef })
public wrapperElRef: ElementRef<HTMLDivElement>

Once the view is initialized (you'll be notified when this happens via the ngAfterViewInit hook), you can grab the HTML element within by accessing `.nativeElement:

this.wrapperElRef.nativeElement //: HTMLDivElement

You can now do

this.wrapperElRef.nativeElement.append(elem)

---

That said, unless you know what you're doing (usually wrapping an existing library or integrating with an existing large system that you cannot yet refactor completely)

Answer 2

Most of the times it depends how you have created the html. I suggest specifying in comments where are you receiving the variable which holds the HTMLElement , so I could give you the most effective way to do it.

But generally - try using innerHTML binding in the parent element.

Typescript:

public elem: HTMLElement;

public getElement(): string {
   return this.elem.innerHTML;
}

HTML:

<div innerHTML="getElement()"></div>