Repository files navigation

This is a little project to show basics of Angular Elements.It is a step by step guide.

Angular Modules and Components are great when using in Angular Environments and the Angular ecosystem.

Have you ever dreamed of using Angular components in just every HTML-Page and other environments likeREACT?

That is what custom-elements are designed for.The custom-elements standard ist supported by most modern browsers.

From angular-io:A custom-element behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.Sounds great.

Even if you stay in the Angular ecosystem, thecreation of dynamic components gets much more easier withAngular Elements. (Am i the only one not liking the ComponentFactory ? ;-))

Summary Benefits

• Angular independent
• Easy dynamic component creation

Angular Elements is the key to transform Angular Components into standarized web-components.

This means that the Angular Framework (and everything else needed) is bundled into one package.

And with Angular we can transport every component into a custom-element with this function:createCustomElement().

Add needed stuff (polyfill) to you app.Using this:ng add @angular/elements --name=elements-test.

0. In tsconfig.json change target to"target": "es2015",

1. Create a common Angular component

2. Convert your new Angular component to a custom-element withcreateCustomElement() (in yourapp.ts)

3. Register to the browsers CustomElement-Registry with js-functioncustomElements.define

4. Add component to entry components inapp.moduleentryComponents: [SendMessageComponent],Add schema the folowing schema:schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

5. Use the custom-element inapp.html

InputSince we have no upper/lower case distinction in html inputs will be transformedto dash-separated lowercase.Example:textInput --> < text-input=''>

EventsEvents will be tranformed to CustomEvents. Here we have upper/lower case.

HTML-Example:

<send-message-elementtext-input="Custom element input text"(send)="dataSend($event)"></send-message-element>

1. To create a custom element just usedocument.createElement
2. To get properties and typings addNgElement & WithProperties<MyComponent>
3. For Events add an event-listener withaddEventListener
4. Add new element to the DOM wirhappendChild

Example:

constsendMessageElement=document.createElement('send-message-element')asNgElement&WithProperties<SendMessageComponent>;sendMessageElement.textInput='Input for new one';sendMessageElement.addEventListener('send',($event)=>this.logSend($event));document.body.appendChild(sendMessageElement);

To use our custom element in other technologies (e.g. REACT) we have to createone single js file.

0. In our componentent change css encapsulation toencapsulation: ViewEncapsulation.Native
1. create an ng prod build withng build --prod --output-hashing false
2. bundle all output *.bundle.js from thedist folder files to a single js-file
3. Write a script and an npm command in package.json for steps 1 and 2

Actually i do not care for testing here (shame on me).Runng test to execute the unit tests viaKarma.

Quick introduction video