Logo for jsDocs.io

@angular/elements

  • Version 17.3.5
  • Published
  • 157 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.

            property name

            name: string;

              property value

              value: any;

                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 onejsDocs.io badgeto 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
                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>