@angular/elements
- Version 19.1.6
- Published
- 61.8 kB
- 1 dependency
- MIT license
Install
npm i @angular/elements
yarn add @angular/elements
pnpm add @angular/elements
Overview
Angular - library for using Angular Components as Custom Elements
Index
Variables
Functions
Classes
Interfaces
Type Aliases
Variables
variable VERSION
const VERSION: Version;
Functions
function createCustomElement
createCustomElement: <P>( component: Type<any>, config: NgElementConfig) => NgElementConstructor<P>;
Creates a custom element class based on an Angular component.
Builds a class that encapsulates the functionality of the provided component and uses the configuration information to provide more context to the class. Takes the component factory's inputs and outputs to convert them to the proper custom element API and add hooks to input changes.
The configuration's injector is the initial injector set on the class, and used by default for each created instance.This behavior can be overridden with the static property to affect all newly created instances, or as a constructor argument for one-off creations.
Parameter component
The component to transform.
Parameter config
A configuration that provides initialization information to the created class.
Returns
The custom-element construction class, which can be registered with a browser's
CustomElementRegistry
.See Also
[Angular Elements Overview](guide/elements "Turning Angular components into custom elements")
Classes
class NgElement
abstract class NgElement extends HTMLElement {}
Implements the functionality needed for a custom element.
property ngElementEventsSubscription
protected ngElementEventsSubscription: any;
A subscription to change, connect, and disconnect events in the custom element.
property ngElementStrategy
protected abstract ngElementStrategy: NgElementStrategy;
The strategy that controls how a component is transformed in a custom element.
method attributeChangedCallback
abstract attributeChangedCallback: ( attrName: string, oldValue: string | null, newValue: string, namespace?: string) => void;
Prototype for a handler that responds to a change in an observed attribute.
Parameter attrName
The name of the attribute that has changed.
Parameter oldValue
The previous value of the attribute.
Parameter newValue
The new value of the attribute.
Parameter namespace
The namespace in which the attribute is defined.
Returns
Nothing.
method connectedCallback
abstract connectedCallback: () => void;
Prototype for a handler that responds to the insertion of the custom element in the DOM.
Returns
Nothing.
method disconnectedCallback
abstract disconnectedCallback: () => void;
Prototype for a handler that responds to the deletion of the custom element from the DOM.
Returns
Nothing.
Interfaces
interface NgElementConfig
interface NgElementConfig {}
A configuration that initializes an NgElementConstructor with the dependencies and strategy it needs to transform a component into a custom element class.
property injector
injector: Injector;
The injector to use for retrieving the component's factory.
property strategyFactory
strategyFactory?: NgElementStrategyFactory;
An optional custom strategy factory to use instead of the default. The strategy controls how the transformation is performed.
interface NgElementConstructor
interface NgElementConstructor<P> {}
Prototype for a class constructor based on an Angular component that can be used for custom element registration. Implemented and returned by the .
See Also
[Angular Elements Overview](guide/elements "Turning Angular components into custom elements")
property observedAttributes
readonly observedAttributes: string[];
An array of observed attribute names for the custom element, derived by transforming input property names from the source component.
construct signature
new (injector?: Injector): NgElement & WithProperties<P>;
Initializes a constructor instance.
Parameter injector
If provided, overrides the configured injector.
interface NgElementStrategy
interface NgElementStrategy {}
Underlying strategy used by the NgElement to create/destroy the component and react to input changes.
property events
events: Observable<NgElementStrategyEvent>;
method connect
connect: (element: HTMLElement) => void;
method disconnect
disconnect: () => void;
method getInputValue
getInputValue: (propName: string) => any;
method setInputValue
setInputValue: ( propName: string, value: string, transform?: (value: any) => any) => void;
interface NgElementStrategyEvent
interface NgElementStrategyEvent {}
Interface for the events emitted through the NgElementStrategy.
interface NgElementStrategyFactory
interface NgElementStrategyFactory {}
Factory used to create new strategies for each NgElement instance.
method create
create: (injector: Injector) => NgElementStrategy;
Creates a new instance to be used for an NgElement.
Type Aliases
type WithProperties
type WithProperties<P> = { [property in keyof P]: P[property];};
Additional type information that can be added to the NgElement class, for properties that are added based on the inputs and methods of the underlying component.
Package Files (1)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular/elements
.
- Markdown[](https://www.jsdocs.io/package/@angular/elements)
- HTML<a href="https://www.jsdocs.io/package/@angular/elements"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 3638 ms. - Missing or incorrect documentation? Open an issue for this package.