# ANGULAR EXTENSIONS ELEMENTS
### The easiest way to lazy-load Angular Elements or any other web components in your Angular application!
by [@tomastrajan](https://twitter.com/tomastrajan)
[](https://www.npmjs.com/package/@angular-extensions/elements) [](https://github.com/angular-extensions/elements/blob/master/LICENSE) [](https://www.npmjs.com/package/@angular-extensions/elements) [](https://travis-ci.org/angular-extensions/elements) [](https://codecov.io/gh/angular-extensions/elements) [](https://conventionalcommits.org) [](https://twitter.com/tomastrajan)
## Documentation
- [Docs](https://angular-extensions.github.io/elements/)
- [Getting started](https://angular-extensions.github.io/elements/#/docs/getting-started)
- [Use cases](https://angular-extensions.github.io/elements/#/docs/use-cases)
- [FAQ](https://angular-extensions.github.io/elements/#/docs/faq)
- [API](https://angular-extensions.github.io/elements/#/docs/api)
- [Examples](https://angular-extensions.github.io/elements/#/examples)
- [Blog post](https://medium.com/@tomastrajan/the-best-way-to-lazy-load-angular-elements-97a51a5c2007)
- [Meetup presentation (video)](https://www.youtube.com/watch?v=X__jkPGYRUs)
## Quickstart
1. Install `npm i @angular-extensions/elements`
2. Add `import { LazyElementDirective } from '@angular-extensions/elements'`;
3. Append `LazyElementDirective` to the `imports: []` of your `MyOrgComponent`
4. Add new `schemas: []` property with `CUSTOM_ELEMENTS_SCHEMA` value to `@Component` decorator of your `MyOrgComponent`
5. Use `*axLazyElement` directive on an element you wish to load and pass in the url of the element bundle
Example of component implementation
```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: `
`,
})
export class MyOrgComponent {
elementUrl = 'https://your-org.com/elements/some-element.js';
data: SomeData;
handleChange(change: Partial) {
// ...
}
}
```
## Supported Angular versions
Library was tested with the following versions of Angular and is meant to be used
with the corresponding major version (`"@angular/core"": "^15.0.0"` with `"@angular-extensions/elements": "^15.0.0"` ).
- 9.x (full IVY support, using renderers so careful with SSR)
- 8.x (partial IVY support, `axLazyElement` works but `axLazyElementDynamic` does NOT work with IVY)
- 7.x
- 6.x (eg `npm i @angular-extensions/elements@^6.0.0`)
## Internal dep graph
## Become a contributor
#### Missing a feature, found bug or typo in docs?
Please, feel free to open an [issue](https://github.com/angular-extensions/elements/issues)
or submit a [pull request](https://github.com/angular-extensions/elements/pulls) to make this project better for everyone! 🤗
## Sponsors
> Are you currently working in an **enterprise polyrepo environment** with many applications and found yourself thinking you could provide so much more value only if you had better overview to plan, track progress and just get things done?
Try _[Omniboard](https://omniboard.dev), the best tool for lead software engineers and architects_
that helps them to get an overview to drive change in **enterprise polyrepo environments** by querying and tracking all their code bases!
The free plan let's you get a full overview of all your projects with your first dashboard, tracking up to 3 different things!
