9. 9
    Use Angular components in AngularJS applications with Angular Elements
    5m 40s

Use Angular components in AngularJS applications with Angular Elements

InstructorJuri Strumpflohner

Share this video with your friends

Send Tweet

When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Ilham Wahabi
~ 5 years ago

great course, I hope you could make more angular-side-things related course like this :)

Juri Strumpflohnerinstructor
~ 5 years ago

@Ilham Glad you liked it. What type of topics would you like to see? #curious 😉

Alex Hubitski
~ 5 years ago

Juri, the intro mentions a change detection quirks and workarounds (at 4:07). I can't find which video has it? I need to deal with the same issue.

Juri Strumpflohnerinstructor
~ 5 years ago

@Alex Hey. Yes right. I had recorded the videos a while back when there was still Angular v6 & the course has been sitting for a while in the publish queue. Just before publishing, I updated some of the videos to Angular v7 so that you get the most fresh content possible 🙂.

That said, the workaround is no more needed. That was a bug in Angular Material and has been solved in version 7. If you're curious, I just removed an obsolete portion of the code I had still forgotten to remove today. Here's the diff.

Related to change detection. That's something I'd like to dive deeper in some upcoming videos. Usually change detection should be fine as is. However, especially if you build a component library that you'd like to expose as a reusable library of custom elements across other frameworks etc...then it's would be best to disable Zone.js entirely (which is responsible for automatic change detection), and rather handle CD by yourself.

Like

platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZone: 'noop' })
  .catch(err => console.log(err));

Then in your components and whenever CD is needed, you inject the ChangeDetectorRef and invoke its .detectChanges() function.

It is more difficult to handle and thus maybe not feasible for when you bundle an entire small app in an Angular Element. But if your goal is to provide a clean component lib, you might want to go that road 😉.

Hope this was helpful, have a nice weekend