Thanks Max, this tutorial is the fourth I've watched about Angular Elements, and the first that actually works in Angular 7! Your explanation also covers everything that might be required, and show the errors when steps are missing. Very useful. Also appreciate the github copy of your example.
Good stuff 👍 One note - technically, they’re not restricted to only working inside of Angular apps - you could build a bundle and use it anywhere, but you might have to do the bundling work manually (as CLI is set up for apps) - for v7 we’ll make this much easier ( and smaller ) Thanks for the great videos, it’s appreciated!
Yep, indeed. Technically, you can use them outside of Angular apps but as you correctly state, it's a) quite some (messy) work and b) super-big since it includes a whole Angular app. And we all know how small (not ;)) these are at the moment. Ivy should make this much better
Great Video Max! Seems like Angular Elements now can be loaded via 2 lines of code with out any bootstrapping. Can you please do an updated video on that topic? Big thanks!
Great stuff man, just wondering if scope works for inputs/outputs? say from parent to the dynamically loaded element vice versa. But i believe the prepared angular element can connect to ngrx store once loaded, so i guess this is going to be very useful
input/ output works and since we pass an injector, even dependency injection works and you can indeed connect Angular elements to services (and therefore NgRx) of your main Angular app. But we'll probably also see some improvements/ some further development regarding that.
Great video.....I follow every step got error as "Failed to construct HtmlElement "."please use the new operator,tgis dom object constructor cannot be called as function."
For everyone encountering this error: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function Stop your server and start it again => ng serve. It should work now If not (like in my case...) try changing the target in tsconfig.json to "es2015" and restart the server. If you still get this error try entering npm install and audit it, restart the server. Now the error is gone.
Hello Max, thank you so much for the update and all your content. I am facing an issues in using web-components from Polymer library into my angular projects.It is demonstrated in google IO talks of 2017 :- ruclips.net/video/Ucq9F-7Xp8I/видео.html, I even tried by cloning the same repo: github.com/angular/custom-elements-interop.git and tried adding some other webcomponents from webcomponents.org, but no results ...would you please provide some clarification on can we really add webcomponents from third parties like webcomponents.org or vaadin webcomponents into our angular projects?
Thanks Max, this tutorial is the fourth I've watched about Angular Elements, and the first that actually works in Angular 7! Your explanation also covers everything that might be required, and show the errors when steps are missing. Very useful. Also appreciate the github copy of your example.
angular element can now be used outside an angular application
Good stuff 👍
One note - technically, they’re not restricted to only working inside of Angular apps - you could build a bundle and use it anywhere, but you might have to do the bundling work manually (as CLI is set up for apps) - for v7 we’ll make this much easier ( and smaller )
Thanks for the great videos, it’s appreciated!
Yep, indeed. Technically, you can use them outside of Angular apps but as you correctly state, it's a) quite some (messy) work and b) super-big since it includes a whole Angular app. And we all know how small (not ;)) these are at the moment. Ivy should make this much better
do you know any example of how to do this? about using it outside Angular apps =) ty
Yay! Rob watches Max's videos!!
How are *Angular Elements* different from *Dynamic Components* that we create using the *ComponentFactoryResolver* class?
it would be nice if you could go over using slots in detail
good, but I can't figure out how to create message like this elements ?
could you give Material tags in alert component? for dynamic insertion of material components.
Hi guys, can someone help me how to add OUTPUT decorator to the element ?
Great Video Max! Seems like Angular Elements now can be loaded via 2 lines of code with out any bootstrapping. Can you please do an updated video on that topic? Big thanks!
Thanks Max. Great Video. Any Idea if it is possible to inject a service into a component without having to import it? I.e with a string identifier?
No, the Type is actually required for the injection since it acts as an injection token that tells Angular which class you want to inject.
Academind thanks.
Great stuff man, just wondering if scope works for inputs/outputs? say from parent to the dynamically loaded element vice versa. But i believe the prepared angular element can connect to ngrx store once loaded, so i guess this is going to be very useful
input/ output works and since we pass an injector, even dependency injection works and you can indeed connect Angular elements to services (and therefore NgRx) of your main Angular app. But we'll probably also see some improvements/ some further development regarding that.
Great video.....I follow every step got error as "Failed to construct HtmlElement "."please use the new operator,tgis dom object constructor cannot be called as function."
No error after restart of server.cool
For everyone encountering this error: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function
Stop your server and start it again => ng serve. It should work now
If not (like in my case...) try changing the target in tsconfig.json to "es2015" and restart the server.
If you still get this error try entering npm install and audit it, restart the server.
Now the error is gone.
Interesting technic. Nice to know!
It was really helpful, thank you!
That's great to hear - thank YOU!
Awesome... @max
Max Do not forget the enhancements in @angular/schematics !! :-)
I'll probably take a look at that in a separate video some time :)
Very good - 좋네요.
Thank you!
Great video! Always wondered how to create custom HTML-Elements :)
So great to read that you like the video Tobias, thank you for your comment!
Hello Max, thank you so much for the update and all your content. I am facing an issues in using web-components from Polymer library into my angular projects.It is demonstrated in google IO talks of 2017 :- ruclips.net/video/Ucq9F-7Xp8I/видео.html, I even tried by cloning the same repo: github.com/angular/custom-elements-interop.git and tried adding some other webcomponents from webcomponents.org, but no results ...would you please provide some clarification on can we really add webcomponents from third parties like webcomponents.org or vaadin webcomponents into our angular projects?
Thank you for your great work Max. You are a great guy. Wanna be my friend? :| Lalala.
Let's be friend! ;-) Thanks for your awesome feedback!
But I mean it! The friend thing! And the compliment thing.
Very good explanation. May Allah(GOD) guide and bless you.