Getting Started with Angular Elements

[zacjones93]

Primary tags

Angular

https://egghead.io/courses/getting-started-with-angular-elements

One of the major innovations in Angular version 6 are Angular Elements. They allow us to develop Angular components just as we’re accustomed to, using their powerful API and then to compile them into browser native Custom Elements. Custom Elements are a web standard for defining new HTML elements in a framework-agnostic way. They extend the HTML by allowing us to define a tag whose content is created and controlled by JavaScript code.

In this course, we’re going to take a look how we can leverage Angular Elements within our Angular apps to make them even more dynamic, a use case that’s commonly required in CMS like environments. But not only, we’ll also see how we can compile our Angular Elements into a standalone script file that can be included in any other web context and how we can pass data and register events on those Custom Elements.

[MaggieAppleton]

Research Notes: What are Angular Elements?

Blog posts and docs:

Angular Docs on Elements
Getting Started with Angular Elements
A Practical Guide to Angular Elements

---

Key Qualities:

• Automatic – easily sets itself up
• Reusable – only need to be written once. And then can be used outside of Angular in other kinds of projects – eg. React, Vue, and Vanilla JS.
• Makes dynamic content possible – makes us able to built complex things like... (examples)
• Bridge between the DOM and the data behind the component

---

Technical Definitions

• Syntax createCustomElement()

• "Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code."

• Elements automatically connect your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents

• Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.

[MaggieAppleton]

Creative Brief: Getting Started with Angular Elements

Primary Tech – Angular & Angular Elements

Angular Elements Logo

Angular Logo

---

Course link: Getting Started with Angular Elements

Course description:

One of the major innovations in Angular version 6 are Angular Elements. They allow us to develop Angular components just as we’re accustomed to, using their powerful API and then to compile them into browser native Custom Elements. Custom Elements are a web standard for defining new HTML elements in a framework-agnostic way. They extend the HTML by allowing us to define a tag whose content is created and controlled by JavaScript code.

In this course, we’re going to take a look how we can leverage Angular Elements within our Angular apps to make them even more dynamic, a use case that’s commonly required in CMS like environments. But not only, we’ll also see how we can compile our Angular Elements into a standalone script file that can be included in any other web context and how we can pass data and register events on those Custom Elements.

---

Previous Angular Illustrations

---

Main Concept

Angular Elements are reusable, easy-to-setup elements of code. They are dynamic, which means they allow web developers to create parts of a website/app that have complex functions such as a map embedded into a page, or live data pulled from a source that is constantly updating.

Illustration should use the red Angular brand colour, and have the Angular "A" logo on it somewhere. Optional to use a little bit of the Angular Elements blue colour (but not required).

Should communicate the idea of a dynamic, easy-to-setup, reusable tool or functional object.

Key Qualities:

• Automatic – they set themselves up without a lot of extra work
• Reusable – you make them once and then can reuse them in different places around a website or app.
• Easy – takes away a lot of the complexity usually needed
• Dynamic – able to live update and handle complex functions

Keywords:

Dynamic, updating, easy-to-use, reusable, automation, sets itself up,

Ideas to Start With

• A small, red and blue machine made of complex web parts (windows, buttons, joints, wheels) with a big, red, easy to press "start" button
• A small red robot multitasking / juggling many things at once – streaming data in from one side, setting up a small structure with one hand, throwing a web window in the air with another hand, lining up a set of buttons / ui elements with another hand
• Small red machine pods making copies of themselves - two already built and one in the process of assembly. Inside the half-built one we see all kinds of complex internal machinery.