This article is going to quickly discuss how to add a web component to your Angular project.
So what is defined as a web component when working with Angular? According to google, “Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.“.
So, in order to use components with Angular, you will need to package them as custom elements. These custom elements are supported by a multitude of the mainstream browsers that are most commonly used.
You will need to use the following function:
createCustomElement()
This will convert your component into a custom element. You can then use the element as any other element with Angular.
This function will use the properties of the component combined with Angular and its functionality with the DOM.