ANGULAR EXTENSIONS ELEMENTS

$3

by @tomastrajan

      

Documentation

- Docs
- Getting started
- Use cases
- FAQ
- API
- Examples
- Blog post
- Meetup presentation (video)

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:

*axLazyElement="elementUrl"
[data]="data"
(dataChange)="handleChange($event)"
>
,
})
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

!Internal dep graph

Become a contributor

#### Missing a feature, found bug or typo in docs?

Please, feel free to open an issue
or submit a pull request to make this project better for everyone! 🤗

Tomas Trajan 💻 🎨 💡 📖 🤔 🚇 ⚠️	Artur Androsovych 💻 🐛	Wayne Maurer 🐛 💻	Santosh Yadav 💻 📦	David Dal Busco 💻 💡	Zama Khan Mohammed 💻 🤔 ⚠️
Angel Fraga Parodi 💡 🤔	ye3i 💻 🤔	Heorhi Shakanau 💻 🤔	Felipe Plets 💻 🎨 💡 📖 🤔 ⚠️	jkubiszewski 💻	Heorhi Shakanau 💻
NagornovAlex 💻	Joseph Davis 💻	Arooba Shahoor 💻	Maximilian Wright 📖	Jakub Stawiarski 💻	Paweł Kubiak 💻
Egor Volvachev 💻	Daniel Bou 💻

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, 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!

alt="Omniboard.dev - getting started in less than 5 minutes" width="100%" />