Can I convert a custom typescript component to a HTMLElement in Angular?-CodePudding

If I have a custom component in Angular. Ex. 'my-component'

Is there a way to convert this component to a HTMLElement to pass to a function, if the function takes a HTMLElement as a parameter?

I know the HTMLElement comes from this library: lib.dom.d.ts -> located in node_modules -> typescript -> lib -> lib.dom.d.ts -> HTMLElement

Here is an image of the element:

CodePudding user response：

I believe the Angular Component class doesn't represent an actual element in the DOM, it's nothing more than a blueprint. In order to create the actual element, you first need to to create it as part of the Angular Component tree and then get a reference to the actual element in the dom through the ElementRef.

Of course this is only possible if everything is running in the Angular Context. The only way to use an Angular Component without Angular is to convert it into a Custom Element, here's a pretty neat tutorial on how to do it https://medium.com/@lavanya.kakimallaiah/creating-a-custom-element-in-angular-aa2a794fd041

CodePudding user response：

If you inject in constructor ElementRef, you can "reach" in elementRef.nativeElement

htmlRef:any
constructor(private elementRef:ElementRef)
{
    this.htmlRef=elementRef.nativeElement
}

But the really important question is: What is the reason to need the htmlRef in Angular?