Elements in v6 and Beyond - Rob Wormald

AI Dev Craft · 52K views · 2018 · 23:07

Open on YouTube

Web developmenttalkdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about Angular Elements, since it is the canonical talk from the Angular team on packaging components as framework-agnostic custom elements.

Recommended by 2 people across 2 different months, 2018 to 2019.

What it is

A 23-minute ng-conf 2018 talk by Rob Wormald on Angular Elements, introduced in Angular 6. It explains how Angular components can be packaged as custom elements and used in apps built with other frameworks, and covers how dependency injection and change detection work for them.

What people said

Strong rec SiddAjmera · 2018-08 · Stack Overflow · on “How to develop Embeddable Widgets using Angular 2 for 3rd party sites”

Have you heard of Angular Elements? It was introduced in Angular 6. The scenario that you're referring to sounds like a perfect use case for Angular Elements. Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. So just think of them as self-contained widgets, that will play quite nicely with any of your web apps built on any framework/library. Have a look at this enlightening NGCONF Talk by Rob Wormald on Angular Elements [this video] . You can find several tutorials on creating an Angular Element. Here's another one by Jeff Delaney from AngularFirebase [LINK] . Angular's Official Website also has a very n

Recommends AlyssaNicoll · 2018-04 · Stack Overflow · on “Technical concepts of Angular Elements and Stencil”

You shouldn't have to ship Angular as you put it. Angular Elements will allow us to use Angular components without the whole Angular Ecosystem. So if you had a React app or a VueJS app, you could take your Angular Element (thanks to Custom Element [LINK] ) and just plop it into those apps. Rob Wormald did a cool talk [this video] about them with all the deets at ng-conf this year. I'd check that out for the latest info.

Cites Amit Beckenstein · 2019-09 · Stack Overflow · on “Angular Element Component doesn't update when I add object from property”

According to "Angular Elements Overview" [LINK] in Angular's documentation: We are working on custom elements that can be used by web apps built on other frameworks. A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. For more about the direction of development, check out this video presentation [this video] . As said in 8:28 in the video presentation attached above [this video] , dependency injection works for custom elements in Angular Elements. Therefore, inject ChangeDetectorRef into your custom element and call detectChanges() when mutating your images array, like so: export class Coun

Cites Amit Beckenstein · 2019-09 · Stack Overflow · on “Angular Element Component doesn't update when I add object from property”

@Bonfry Sounds like `ChangeDetectorRef` wasn't *actually* injected. Did you pass an `Injector` instance as an option when you called `createCustomElement()` [this video] to create your custom `CounterComponent` element?