Angular › Angular Elements (Web Components)

What are Angular Elements and what problem do they solve?

Beginner

Answer

Angular Elements let you package an Angular component as a standard web component, called a custom element, which can then be used inside any web page or framework, such as plain HTML, React, or Vue, without needing to know anything about Angular at all.

import { createCustomElement } from '@angular/elements';

const element = createCustomElement(MyWidgetComponent, { injector });
customElements.define('my-widget', element);

// Now usable anywhere as: <my-widget></my-widget>

Real-world example A company builds a single Angular based chat widget component and turns it into a custom element, letting many different websites built with entirely different technologies embed the exact same chat widget with a single HTML tag.

Common follow-ups: Does a page using an Angular Element need to have Angular installed itself?;How large is the typical bundle size needed to run an Angular Element on its own?

Standalone Components;Micro Frontends with Angular