Angular & Signals (283 Qs)•Part 2: HttpClient, RxJS Observables & Angular Elements (36 - 62)
What are Angular elements?
Angular elements are Angular components packaged as custom elements (a web standard for defining new HTML elements in a framework-agnostic way). Angular Elements host an Angular component, providing a bridge between the data and the logic defined in the component and the standard DOM APIs, thus, providing a way to use Angular components in non-Angular environments.
Practical Code Example
typescript
// Angular Elements: Packaging Angular components as native Web Standards Custom Elements
import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyProfileComponent } from './profile.component';
export function registerElement(injector: Injector) {
const ProfileElement = createCustomElement(MyProfileComponent, { injector });
customElements.define('app-profile-element', ProfileElement);
}
// Now usable in raw HTML / React / Vue: <app-profile-element user-id="123"></app-profile-element>