Angular Elements - A Practical Introduction To Web Components With Angular 6

With the release of Angular 6 the new Angular Elements functionality is now fully available. By using Angular Elements you can package Angular components as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

The custom elements standard is currently supported by browsers like Chrome, Opera, and Safari. To be able to use it Firefox and Edge polyfills are available. With a custom element you can extend the set of available HTML tags. The content of this tag is then controlled by JavaScript code which is included in the page.

In order to keep track of all available custom elements the browser maintains a registry in which every elements needs to be registered first. In this registry the name of the tag is mapped to the JavaScript class which controls the behavior and the output of that element.

The Angular Elements functionality is available with the package @angular/elements. This packages exposes the createCustomElement() function which can be used to create a custom element (web component) from an Angular component class. Therewith it provides a bridge from Angular component interface and change detection functionality to the build-in DOM API.

In this tutorial we'll explore the Angular Elements functionality from scratch by implementing a practical example from start to finish.
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

[natejones]

Nice an informative, but can we get a tutorial showing how to deploy this web component and use it in another angular app? That's supposed to be the big win for web components but it's the part that's skipped in a lot of tutorials I've seen.

[Chillouttrance]

Thanks you . You saved my day. In app.module.ts I was keeping both bootstrap & entryComponents & only in this video i realized I don't need bootstrap. Thanks

[TheMezanine]

Thanks Sebastian for this nice tutorial on this great new awesome angular feature!!!

[balintcsaszar]

Okay...after the video I realize that this is not about custom elements. You just use the tag of the component like we have always used it. Angular elements should be created via document.createElement() method dynamically....

[bennguyen]

Is it possible to use Web Components without any server-side software installed? XHR requests handled within the browser?

For example, could Electron be used to bundle everything (ajax, fetch, etc) into an exe such that the end-user would not have to install anything additional?

There was a good post "Implementing single file Web Components" but couldn't tell if a server is required either.

[zebcode]

I followed this, I even looked at your code and compared it to mine. I can't see any obvious differences (other than that my component simply renders some text saying "Component works". For some reason when I use the live server to view my page my component has 0px height 0px width and no content. I'm struggling to see what can be causing this.

[Jay-kvzs]

what about using @angular/material inside your element and then importing this into a different app(angular 6) into a child component, element animations won't work unless the tag is add it on index.html

[zebcode]

Okay Now I've run your example from github (in the comments)... I get the following error with your code:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

My steps:
I ran: npm update && npm upgrade
then: npm install then: npm run build:elements
I must be doing something wrong...?

[tonyster]

Hey, Many thanks for the video, very clean.
I wonder to know how import a custom service in a element component, i try to import into constructor eg:(private auth0:AuthService) but when try to load the component in a html page he don't found the the provider ( StaticInjectorError(Platform: core)[e -> e]:
NullInjectorError: No provider for e)

[pubudusenarathne]

Can't use @angular-redux/store with angular 6 and rxjs 6 😑 anyone who might have come across this?

[rajastylez]

This better not be a waste of my time.