Use Angular components in AngularJS applications with Angular Elements

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

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

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.

@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