widget-angular-element v0.0.2
Widgets - Angular Elements
About angular Elements
Angular Elements allows to reuse Angular components almost everywhere.
This folder holds a library with example components. The library is ready to be shared and used in all of your Angular applications without further configuration.
The benefit of building it as a library is that it can be shared among multiple angular applications and each of those applications get the ability to use the public API of the component. So you get the code completion and IDE support that you would for any 3rd party angular component.
Angular Elements
Angular elements are Angular components packaged as custom elements (or Web Components), a web standard for defining new HTML elements in a framework-agnostic way.
The @angular/elements package exports a createCustomElement() API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
Web Components
Web Components aims to improve reusing code as much as possible - it consists of three technologies, that can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow to define custom elements and their behavior, which can then be used as desired in the user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
HTML templates: The
<template>and<slot>elements enable the possibility to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
Useful Links
Key points
projects/widgets/src/lib/components: Component/widget definition.projects/widgets/src/lib/modules/[widget].module.ts: Each component has a module. The module is responsible for the Angular Element adding process.
projects/widgets/src/lib/shared: Module with configurations needed on multiple modules, preventing verbose code.
projects/widgets/assets/i18n: Folder with all the language files.