### Install @angular-extensions/elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Install the Angular Elements extension library using npm. This is the first step to enable the use of web components within your Angular application.

```bash
npm i @angular-extensions/elements
```

--------------------------------

### Configure AppModule Imports

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Append the imported LazyElementsModule to the imports array of your AppModule. This makes the directive and services available throughout your application.

```typescript
imports: [
  LazyElementsModule
]
```

--------------------------------

### Use axLazyElement Directive

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Apply the *axLazyElement directive to an HTML element in your component's template. Pass the URL of the element bundle as the directive's value to load the web component.

```html
<div *axLazyElement="'./path/to/element-bundle.js'"></div>
```

--------------------------------

### Angular Lazy Elements Dynamic Configuration Example

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html

A TypeScript example demonstrating the setup for dynamic element configuration in Angular. This typically involves importing and configuring the LazyElementsModule and providing dynamic configurations.

```typescript
import { LazyElementsModule } from '@angular/elements';

@NgModule({
  imports: [
    BrowserModule,
    LazyElementsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor() {
    // Define custom elements that should be loaded dynamically
    // Example: defineCustomElement('sl-button', './assets/sl-button.js');
  }
}
```

--------------------------------

### Import LazyElementsModule

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Import the LazyElementsModule into your Angular application's root module (AppModule). This module provides the necessary functionality for lazy loading elements.

```typescript
import { LazyElementsModule } from '@angular-extensions/elements';
```

--------------------------------

### Configure NgModule Schemas

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Add the CUSTOM_ELEMENTS_SCHEMA to the schemas array within the @NgModule decorator of your AppModule. This allows Angular to recognize custom HTML elements.

```typescript
@NgModule({
  // ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
```

--------------------------------

### Configure Lazy Loaded Modules

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

Ensure that any module using the *axLazyElement directive also includes CUSTOM_ELEMENTS_SCHEMA in its @NgModule decorator and imports LazyElementsModule, either directly or indirectly via a SharedModule.

```typescript
@NgModule({
  // ...
  imports: [
    // ...
    LazyElementsModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
```

--------------------------------

### Install Angular Extensions Elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/home/home.component.html

Install the Angular Extensions Elements package using npm. This is the first step to integrating lazy loading capabilities into your Angular project.

```bash
npm i @angular-extensions/elements
```

--------------------------------

### Angular Elements Loading Template Example

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.html

This snippet demonstrates how to define a loading template in Angular using `<ng-template>` which will be displayed while the Angular Element is being loaded.

```html
<ng-template #loading>Loading ...</ng-template>
```

--------------------------------

### Dynamic Pre-configuration with Runtime Resolution

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Shows how to pre-configure `LazyElementsModule` with element configurations resolved at runtime. It utilizes the `LAZY_ELEMENT_CONFIGS` token as a multi-provider with a custom factory function for dynamic setup.

```typescript
import { NgModule, Injector } from '@angular/core';
import { LazyElementsModule, LAZY_ELEMENT_CONFIGS, LazyElementConfig } from '@angular/elements';

export function lazyElementConfigsFactory(injector: Injector) {
  const flag = true; // Resolved at runtime
  const config: LazyElementConfig = {
    url: 'https://example.com/elements/dynamic-element.js',
    tag: 'dynamic-element',
    // Other options can be dynamically set here
  };
  return [config];
}

@NgModule({
  imports: [
    LazyElementsModule.forChild([{ provide: LAZY_ELEMENT_CONFIGS, useFactory: lazyElementConfigsFactory, deps: [Injector] }])
  ]
})
```

--------------------------------

### SystemJS Configuration for Import Maps

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Provides an example of how to configure SystemJS in index.html to support import maps for lazy loading custom elements with Angular Elements.

```HTML
<script src="https://unpkg.com/systemjs/dist/system.min.js"></script>
<script>
  System.config({
    map: {
      'sl-switch': './assets/sl-switch.js'
    }
  });
</script>
```

--------------------------------

### Simplified Component Template with Pre-configured Elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/configuration/configuration.component.html

Shows an example of an Angular component template that utilizes pre-configured elements. Due to the centralized configuration, the template becomes simpler, with less redundant data, as the element's URL and other properties are managed by the `LazyElementsModule`.

```html
<user-profile-element></user-profile-element>
<user-profile-element></user-profile-element>
<user-profile-element></user-profile-element>
```

--------------------------------

### HooksConfig for Element Lifecycle

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Provides a way to configure lifecycle hooks for lazy-loaded elements. These hooks allow custom logic to be executed before an element starts downloading or after it has completed downloading, with support for asynchronous operations.

```TypeScript
interface HooksConfig {
  beforeLoad?: Hook;
  afterLoad?: Hook;
}

// Hook type definition
// type Hook = (tag: string) => Promise<void> | void;
```

--------------------------------

### Global Pre-configuration with `forRoot`

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Explains how to apply global pre-configurations for Angular Elements using `LazyElementsModule.forRoot()`. This is typically done in `AppModule` or `CoreModule` to set default options or provide central element configurations.

```typescript
import { NgModule } from '@angular/core';
import { LazyElementsModule, LazyElementConfig } from '@angular/elements';

const globalElementConfigs: LazyElementConfig[] = [
  { url: 'https://example.com/elements/global-element.js', tag: 'global-element' },
  { url: 'https://example.com/elements/another-global.js', tag: 'another-global', isModule: true }
];

@NgModule({
  imports: [
    LazyElementsModule.forRoot({ elementConfigs: globalElementConfigs })
  ]
})
```

--------------------------------

### LazyElementModule Configuration with forRoot

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Demonstrates the usage of the `LazyElementModule.forRoot()` static method to configure the module with global options, such as providing default loading and error components, and setting global flags for module loading and import maps.

```TypeScript
import { LazyElementModule } from '@angular-extensions/elements';

@NgModule({
  imports: [
    LazyElementModule.forRoot({
      loadingComponent: MyLoadingComponent,
      errorComponent: MyErrorComponent,
      isModule: true,
      importMap: true
    })
  ]
})
export class AppModule {}
```

--------------------------------

### Preloading Angular Elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Shows how to preload Angular Elements using the `LazyElementLoaderService`. You can preload all configured modules or specify a list of tags to preload, improving initial load times for elements.

```typescript
import { Component } from '@angular/core';
import { LazyElementLoaderService } from '@angular/elements';

@Component({
  selector: 'app-preloader',
  template: '<button (click)="preloadElements()">Preload Everything</button>'
})
export class PreloaderComponent {
  constructor(private lazyElementLoader: LazyElementLoaderService) {}

  preloadElements(): void {
    this.lazyElementLoader.preload(); // Preloads all configured elements
    // Or preload specific elements:
    // this.lazyElementLoader.preload(['sl-avatar', 'my-element']);
  }
}
```

--------------------------------

### Pre-configuration with Inline HTML Options

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Illustrates using pre-configured `LazyElementsModule` without needing to specify the `url` in the template. The `*axLazyElement` directive can accept a `null` URL when other options like `module` or `loadingTemplate` are used.

```html
<my-element *axLazyElement="{ url: null, module: 'MyElementModule', loadingTemplate: loadingTemplate }"></my-element>

<ng-template #loadingTemplate>
  Loading...
</ng-template>
```

--------------------------------

### Pre-configure Angular Elements with LazyElementsModule

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/configuration/configuration.component.html

Demonstrates how to pre-configure Angular Elements using `LazyElementsModule.forRoot()` or `.forFeature()` to specify element tags and URLs. This approach centralizes configuration, making it easier to manage multiple element instances and reducing redundancy in component templates.

```typescript
import { LazyElementsModule } from '@angular/elements';

@NgModule({
  imports: [
    LazyElementsModule.forRoot({
      elements: [
        { tag: 'user-profile-element', url: 'path/to/user-profile-element.js' },
        // ... other elements
      ]
    })
  ]
})
export class AppModule {}
```

--------------------------------

### Lazy Load Angular Element with Pre-configuration

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Demonstrates pre-configuring a library with element configuration, allowing the element to be lazy-loaded without specifying the URL in the `*axLazyElement` directive. This simplifies template usage.

```typescript
import { NgModule } from '@angular/core';
import { LazyElementsModule, LazyElementConfig } from '@angular/elements';

const elementConfig: LazyElementConfig = {
  url: 'https://example.com/elements/my-element.js',
  tag: 'my-element'
};

@NgModule({
  imports: [
    LazyElementsModule.forChild([{ ...elementConfig }])
  ]
})
```

--------------------------------

### Standard HTML Script Inclusion for Web Components

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.html

Illustrates the traditional method of including a web component's JavaScript bundle in the index.html file. This approach can lead to a larger initial JavaScript payload.

```HTML
<script src="path/to/your-org-customer-editor.js"></script>
```

--------------------------------

### Implementing Element Lifecycle Hooks

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Details how to implement custom logic at various stages of an element's lifecycle by providing hooks in `ElementConfig` or `LazyElementRootOptions`. This allows for custom actions during element loading and initialization.

```typescript
import { NgModule } from '@angular/core';
import { LazyElementsModule, LazyElementConfig } from '@angular/elements';

const elementConfigWithHook: LazyElementConfig = {
  url: 'https://example.com/elements/hook-element.js',
  tag: 'hook-element',
  hooks: {
    onBeforeLoad: () => console.log('Element about to load'),
    onLoaded: () => console.log('Element has loaded'),
    onLoadError: (error) => console.error('Element failed to load:', error)
  }
};

@NgModule({
  imports: [
    LazyElementsModule.forChild([{ ...elementConfigWithHook }])
  ]
})
```

--------------------------------

### LazyElementModule Configuration with forFeature

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Shows how to use the `LazyElementModule.forFeature()` static method to configure specific features or elements within a module. This allows for more granular control over element loading configurations.

```TypeScript
import { LazyElementModule } from '@angular-extensions/elements';

@NgModule({
  imports: [
    LazyElementModule.forFeature([{ /* ElementConfig */ }])
  ]
})
export class FeatureModule {}
```

--------------------------------

### Dynamically Load Angular Element with *axLazyElementDynamic

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html

Demonstrates loading a custom element, like '<sl-button>', dynamically using the *axLazyElementDynamic directive. It highlights the use of '<ax-lazy-element>' as a placeholder to avoid Angular's template validation issues with custom properties and events.

```html
<ax-lazy-element *axLazyElementDynamic="'sl-button'"></ax-lazy-element>
```

--------------------------------

### Dynamically Load Angular Element with Pre-configured Module

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html

Shows how to use the *axLazyElementDynamic directive with a pre-configured LazyElementsModule. This approach eliminates the need to specify the element's URL directly in the template, using a simple '<div>' as the host element.

```html
<div *axLazyElementDynamic="'wired-button'"></div>
```

--------------------------------

### Basic Lazy Element Usage in Angular

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Demonstrates the most basic usage of the *axLazyElement directive to lazy load a custom element like '<sl-icon>'. It requires specifying the URL of the element's implementation.

```TypeScript
import { axLazyElement } from '@angular-extensions/elements';

@Component({
  selector: 'app-root',
  template: '<sl-icon *axLazyElement="{url: './assets/sl-icon.js'}"></sl-icon>',
  standalone: true,
  imports: [axLazyElement]
})
export class AppComponent {}
```

--------------------------------

### Lazy Load with Loading and Error Templates

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Shows how to specify custom Angular templates for loading states and error handling when using the `axLazyElement` directive. This allows for a better user experience during the asynchronous loading process.

```HTML
<ng-template #loading>Loading...</ng-template>
<ng-template #error>Loading failed...</ng-template>
<some-element *axLazyElement="url; loadingTemplate: loading; errorTemplate: error"></some-element>
```

--------------------------------

### Configure Lazy Element with Import Maps

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Illustrates how to enable the use of import maps for resolving the element URL by setting the `importMap` input property to `true`. This requires an instance of SystemJS in the application.

```HTML
<some-element *axLazyElement="url; importMap: true"></some-element>
```

--------------------------------

### Lazy Load Angular Element with axLazyElement Directive

Source: https://github.com/angular-extensions/elements/blob/master/README.md

Demonstrates how to use the `*axLazyElement` directive to lazy load a web component. It shows the necessary imports, schema configuration, and how to bind data and handle events.

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementDirective } from '@angular-extensions/elements';

@Component({
  selector: 'your-org-feature',
  imports: [LazyElementDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: '
    <!-- will be lazy loaded and uses standard Angular template bindings -->
    <some-element
      *axLazyElement="elementUrl"
      [data]="data"
      (dataChange)="handleChange($event)"
    ></some-element>
  ',
})
export class MyOrgComponent {
  elementUrl = 'https://your-org.com/elements/some-element.js';

  data: SomeData;

  handleChange(change: Partial<SomeData>) {
    // ...
  }
}
```

--------------------------------

### Lazy Element with Import Maps and SystemJS

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Explains how to use the *axLazyElement directive with import maps to load custom elements, requiring SystemJS to be globally available. The 'importMap' flag enables this functionality.

```TypeScript
import { axLazyElement } from '@angular-extensions/elements';

@Component({
  selector: 'app-root',
  template: '<sl-switch *axLazyElement="{url: 'sl-switch', importMap: true}"></sl-switch>',
  standalone: true,
  imports: [axLazyElement]
})
export class AppComponent {}
```

--------------------------------

### Pre-configuration with 'isModule' Option

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html

Demonstrates pre-configuring the `isModule` flag within the `LazyElementsModule` configuration. This eliminates the need to specify the `isModule` flag in the template for module-style elements.

```typescript
import { NgModule } from '@angular/core';
import { LazyElementsModule, LazyElementConfig } from '@angular/elements';

const elementConfig: LazyElementConfig = {
  url: 'https://example.com/elements/module-element.js',
  tag: 'module-element',
  isModule: true
};

@NgModule({
  imports: [
    LazyElementsModule.forChild([{ ...elementConfig }])
  ]
})
```

--------------------------------

### LazyElementsLoaderService Preload Method

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

The LazyElementsLoaderService provides a method to preload specified Angular elements or all configured elements. This can improve performance by loading components in advance.

```TypeScript
class LazyElementsLoaderService {
  preload(tags?: string[]): void;
}
```

--------------------------------

### Lazy Load Angular Element with URL

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Demonstrates how to use the `axLazyElement` directive to lazy load an Angular element by providing its bundle URL. Supports both inline string values and component property references for the URL.

```HTML
<some-element *axLazyElement="'https://elements.com/some-element'"></some-element>
<some-element *axLazyElement="url"></some-element>
```

--------------------------------

### Lazy Load Angular Element with *axLazyElement

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/how-it-works/how-it-works.component.html

Demonstrates how to use the *axLazyElement directive to lazy load an Angular element. The element is conditionally rendered using `@if`, ensuring that the loading of its bundle is deferred until it's actually needed.

```HTML
<ng-container *ngIf="showCustomerEditor">
  <your-org-customer-editor *axLazyElement="'path/to/your-org-customer-editor.js'"></your-org-customer-editor>
</ng-container>
```

--------------------------------

### Lazy Element with Loading Template

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Shows how to display a loading indicator using an ng-template while a custom element is being lazy loaded. The '#loading' template is shown until the element is ready.

```TypeScript
import { axLazyElement } from '@angular-extensions/elements';

@Component({
  selector: 'app-root',
  template: '<ng-container *axLazyElement="{url: './assets/sl-button.js'}">
               <ng-template #loading>Loading...</ng-template>
             </ng-container>',
  standalone: true,
  imports: [axLazyElement]
})
export class AppComponent {}
```

--------------------------------

### Dynamically Load Web Components with *axLazyElementDynamic

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/use-cases/use-cases.component.html

The `*axLazyElementDynamic` directive allows for lazy loading of any web component within an Angular application without hard-coding its tag name. This enables dynamic specification of custom element tags at runtime while still supporting standard Angular template property and event bindings.

```TypeScript
import { AXLazyElementDynamicModule } from '@angular-extensions/elements';

@NgModule({
  imports: [
    // ...
    AXLazyElementDynamicModule.forRoot()
  ]
})
export class AppModule {}
```

--------------------------------

### On-Demand Loading of Heavy Components with *axLazyElement

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/use-cases/use-cases.component.html

The `*axLazyElement` directive facilitates the seamless loading of components on demand, particularly useful for heavy third-party components like rich text editors. This directive ensures that such components are loaded only when they are rendered as a result of user interaction, improving application performance and startup time.

```TypeScript
import { AXLazyElementModule } from '@angular-extensions/elements';

@NgModule({
  imports: [
    // ...
    AXLazyElementModule.forRoot()
  ]
})
export class AppModule {}
```

--------------------------------

### Dynamically Render Multiple Elements with @for Loop

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html

Illustrates using the *axLazyElementDynamic directive within an @for loop to render multiple dynamic elements based on a runtime configuration. This is ideal for microfrontend applications where element configurations are fetched from a backend.

```html
@for (c of dynamicConfigs; track c.tag) {
  Loading <{{ c.tag }}>...
  @if (c.content) {
    {{ c.content }}
  }
}
```

--------------------------------

### Configure Lazy Element as Module

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Explains how to configure the `axLazyElement` directive to load the element as a module by setting the `module` input property to `true`. This affects the generated script tag with `type="module"`.

```HTML
<some-element *axLazyElement="url; module: true"></some-element>
```

--------------------------------

### ElementConfig Properties for Lazy Loading

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Defines the configuration for individual elements to be loaded lazily. This includes the tag name, URL of the bundle or module, whether to load as a module, import map resolution, custom loading/error components, preloading flags, and lifecycle hooks.

```TypeScript
interface ElementConfig {
  tag: string;
  url: string;
  isModule?: boolean;
  importMap?: boolean;
  loadingComponent?: Type<any>;
  errorComponent?: Type<any>;
  preload?: boolean;
  hooks?: HooksConfig;
}
```

--------------------------------

### Lazy Elements Registry Interface (TypeScript)

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

Defines the contract for custom lazy element registries. It includes methods to manage the loading state (Promises) of element bundles based on their URLs.

```TypeScript
interface LazyElementsRegistry {
  get: (url: string) => Promise<void>;
  set: (url: string, notifier: Promise<void>) => void;
  has: (url: string) => boolean;
}
```

--------------------------------

### Lazy Element with Error Template

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Illustrates how to handle loading failures by providing an error template. If the custom element fails to load (e.g., due to an incorrect URL), the '#error' template will be displayed.

```TypeScript
import { axLazyElement } from '@angular-extensions/elements';

@Component({
  selector: 'app-root',
  template: '<ng-container *axLazyElement="{url: './assets/non-existent.js'}">
               <ng-template #error>Loading failed...</ng-template>
             </ng-container>',
  standalone: true,
  imports: [axLazyElement]
})
export class AppComponent {}
```

--------------------------------

### LAZY_ELEMENTS_REGISTRY Token for Customization

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/api/api.component.html

A token used to override the default lazy elements registry. This is useful for managing multiple elements or applications on a single page and preventing duplicate downloads of JavaScript bundles. The custom implementation must adhere to the LazyElementsRegistry interface.

```TypeScript
{
  provide: LAZY_ELEMENTS_REGISTRY,
  useClass: YourRegistryImplementation
}
```

--------------------------------

### Use *axLazyElement Directive in Angular Template

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/home/home.component.html

Apply the `*axLazyElement` directive to an HTML element in your Angular template. Pass the URL of the element bundle to the directive to enable lazy loading.

```html
<div *axLazyElement="'path/to/your/element-bundle.js'"></div>
```

--------------------------------

### Fix RxJs Zone Issue in Angular Elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/docs/change-detection/change-detection.component.html

This snippet demonstrates how to import the RxJs zone patch to ensure RxJs streams run in the correct zone within an Angular Element. This is crucial when the element is used within a parent Angular application to prevent change detection failures.

```TypeScript
import 'zone.js/dist/zone-patch-rxjs';
```

--------------------------------

### Import LazyElementDirective in Angular

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/home/home.component.html

Import the `LazyElementDirective` from the `@angular-extensions/elements` package. This directive is essential for enabling the lazy loading functionality.

```typescript
import { LazyElementDirective } from '@angular-extensions/elements';
```

--------------------------------

### Advanced Binding with Lazy Element

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/examples/basic/basic.component.html

Demonstrates passing complex data, like an array, to a lazy-loaded custom element using standard Angular property binding. The 'xAxis' array is passed to the 'xlim' property.

```TypeScript
import { axLazyElement } from '@angular-extensions/elements';

@Component({
  selector: 'app-root',
  template: '<ink-chart *axLazyElement="{url: './assets/ink-chart.js'}"
                 [xlim]="xAxis">
               <ng-template #loading>Loading...</ng-template>
             </ink-chart>',
  standalone: true,
  imports: [axLazyElement]
})
export class AppComponent {
  xAxis = [-6.28, 6.28];
}
```

--------------------------------

### Configure Angular Component for Lazy Elements

Source: https://github.com/angular-extensions/elements/blob/master/projects/elements-demo/src/app/features/home/home.component.html

Configure your Angular component to use lazy elements by importing `LazyElementDirective` into its `imports` array and adding `CUSTOM_ELEMENTS_SCHEMA` to its `@Component` decorator's `schemas` property.

```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementDirective } from '@angular-extensions/elements';

@Component({
  selector: 'my-org-component',
  standalone: true,
  imports: [LazyElementDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `...`
})
export class MyOrgComponent {}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.