👍Your videos are not just rad, they are fast paced, to the point, packed with right balance of explanation and code, no nonsense... testimony of your smartness. Thank you, I just made my custom component with Angular elements. Take a bow Fireship! Keep the good work going.
Awesome! I am already a subscriber for the angular firebase premium! and I believe that's the best money i spent on getting updated with new angular happenings in bit sized videos, something that i can watch when i am travelling, something that can be quickly referenced, and every code written in detail in the main website too. Thanks a lot! Looking forward to more awesomeness..
Hi Hari! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Just received my sticker for completing the github tutorial! Thanks, Jeff! I did not expect you to send it to Russia! :D And thanks for a great tutorial, as always!
@@Fireship How do I get the sticker and Tshirt to Nigeria. I don't mind paying... I paid to learn last year but I could not complete it because I was busy with office work
Hi VIkas! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
What would be the appropriate way of including the element.js file in another angular project? Can I use the element.js file to use the web component tags in another project's tag? When I try I get conflict with the web component's zone.js and the main app zone.js dependency.
Hi Satyajoti! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
@@Fireship Yeah! Excuse me, it would be awesome you should make a video with Dialogflow or mixing something about crypto, like ethereum. Either way, your channel it's a great guideline. I owe you so much.
I really was surprised that the destructuring with square brackets in the for loop! That's a great tip! I was expecting curly braces! Thanks for the awesome content!
Some problems you guys may get stuck on 1. Create 2 angular apps and expose custom elements from each and use them in a third app. : Zone.js is already loaded. Solution : Use ngx-build-plus or don't use zone at all. 2. TypeError: Failed to construct 'HTMLElement' Solution : Web components required ES6 classes. Angular by default compiles code to ES5, so either include native-shim polyfill or change compilation target to es2016. 3. Shadow DOM and global styles ? Solution : This is bit tricky. Use @import or don't use global styles. 4. Shadow DOM in Edge and IE and using ? Solution: Use shady DOM polyfill. 5. Shady DOM and angular router is buggy: No solution for now. 6. Exclude dependencies Solution: Use ngx-build-plus. This again is tricky and even more tricky to reimport. Suggestion is to wait for ivy.
Hi Kartik! Thanks for all that information! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Nice Demo. Question: Why not use window.addEventListener("scroll") et remove the listener when the component is visible ? Is it possible to remove the hostListener ?
1. How can we split up each Element into separate chunks? When we load some of those chunks dynamically into the browser: A) can they still share an injector? B) can they share core dependencies so i dont have to load it n-times? The background: lets say I have 6 elements. I want userA to use and only know about elements {1-4} and userB {2, 5-6}
Hi, I'm struggling to find a way to create an expandable and collapsible table rows using Angular material, This could be a parent, child visualisation, which I need to create. I'll be thankful if you spend some time to crack through the angular material table or some other libraries in Angular. Please have one video over it.. explaining those. Thanks
Hi Roshan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Hi Pranay! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
When I tried to export a few elements with Angular Elements I did have issues that I was unable to debug, so I had to give up and load a whole angular application containing the elements I wanted to use... huge fail. However, this might be related to the issue you are talking about : disabling NgZone. I will have to give it another try. That said, it's a pity that we cannot reliably use NgZone as writing custom elements still feels a bit hacky for this reason.
This is a great start... But tracking scroll event and checking with boundingRect may not be performant and can cause jank when more images are present in the page. Could you please use IntersectionObservers in future examples as we expect top notch quality content and best practices from you.
Thanks for the suggestion, that would make a cool video. The browser support is not universal for IntersectionObservers, but I also considered using Rx fromEvent to throttle and unsubscribe from events.
Hi Nanda! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Hey Jeff, awesome tips. However, shadow DOM is a cool and a strong feature but the browser support really breaks the will to use it. Am currently working on a notification angular element, but not able to use this feature on IE11+. Shady Dom polyfills also did no good. Any pointers?
Did I understand correctly that you didn't use `ngx-build-plus` but instead just concatenated the CLI's build output js into a single `elements.js` file?
Hi, thanks for the lesson, if I have to pass an array of data as an attribute, should I make JSON.stringify and parse it in my angular component? because of setAttribute only for a string value and do we have some tools for hot reloading or we have to bundle all the time?
Hi! Really nice vid, thanks! One question: does it make sense or is it even possible to create a web component which is quite complex and requires routing, forms, tabs... or should I create instead a library considering this element would not be used outside of an Angular app?
Hi Siva! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
what if we are fetching custom-elements from various sources or different angular projects? would it duplicate the core code generated by angular and is concatenated by the approach u presented? in such case should we leave out the build divided and not single bundled?
I saw it in its repo’s sample. That kind of narrows down the usage of angular elements to an angular applications. At least imo it would make more sense. Right?
Honestly, I didnˋt quite get the idea behind elements. This way I can embed angular components into non angular websites right? I can See the benefit with SEO this way but how exactly is it more performent? What If I have a really angular heavy website, would it still make sense to split it up in many different angular elements and embed them into a website?
Web components make the most sense when you have server rendered content imo. If you have a highly interactive app that is mostly behind a user auth wall, then the SPA approach is superior.
Hi Ayan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
I have actually been really confused by webpack for a long time. Even after reading the docs I don't feel like I have a great grip on it. I think a video would be very popular and appreciated. Also, Thank you for all of your videos so far!
With angular 7.2 i get this error : Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Web components required ES6 classes. Angular by default compiles code to ES5, so either include native-shim polyfill or change compilation target to es2016.
Hi Kamal! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
@@kamalkamals That's great! I'm not able to post my LinkedIn link here for some reason. Can you please find me on LinkedIn, just @ Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine.
Angular has it's own system with ng-template. Slots are a feature specific to web components developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
Hi Sai! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
@@saisreenivas2227 That's great! Can we please connect on LinkedIn or gmail for more details? Please @ Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine. I'm not able to post my link here for some reason.
WINNER!!! You are the lucky T-shirt winner this week, send me a private message with your shipping details and size :) ruclips.net/video/fsVL_xrYO0w/видео.html
Not sure how well supported but there’s this intersectionObserver api which can determine if our object is visible in the viewport. Just for the sake of freshness... love your work
HI Vikas! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
HI Siddhant! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Hi Shubham! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Hi Rahul! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
I deployed my first major Angular app today.... Thanks Jeff, you engineered it all. I'm eternally grateful ❤
Wow, congrats! Happy to have played a small role in the process :)
It wasn't a small one.... It was everything... Merci
👍Your videos are not just rad, they are fast paced, to the point, packed with right balance of explanation and code, no nonsense... testimony of your smartness. Thank you, I just made my custom component with Angular elements. Take a bow Fireship! Keep the good work going.
Thank you! Awesome to hear that :)
Hi Raja! Are you looking out for jobs in web development currently? We are a web dev company and looking to hire; let me know if interested.
FYI this video is a premiere so pull up the live chat for the full experience
Says it's disabled tho?
@@Nalopotato Not sure what the problem is there... RUclips is not letting me enable the chat replay :(
Game changing. Much like Angular Firebase itself. You're doing God's work here, Jeff.
I'm still new to Angular and I find your videos immensely helpful. Thanks.
dude I can't tell you how much u're making my life easier around here !!
amazing work
This is actually the best part of Angular - Angular elements !!!
Let's go !
Just started coding with angular and typescript this past 2 months, and I am loving it.
Really .. is better than React .. i m talking about syntax ??
@@alsaamit So far I got no complaints.
Don’t know how I went so long without seeing these videos, keep up the good work!
Jeff + Angular Elements = Pure ingenuity 👍🏼👍🏼
Awesome! I am already a subscriber for the angular firebase premium! and I believe that's the best money i spent on getting updated with new angular happenings in bit sized videos, something that i can watch when i am travelling, something that can be quickly referenced, and every code written in detail in the main website too. Thanks a lot! Looking forward to more awesomeness..
Hi Hari! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥Angular Elements (aka Web Components) for the win in 2019!!🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Just received my sticker for completing the github tutorial! Thanks, Jeff! I did not expect you to send it to Russia! :D
And thanks for a great tutorial, as always!
Glad to hear it landed successfully, I send stickers to every country 😀
@@Fireship How do I get the sticker and Tshirt to Nigeria. I don't mind paying... I paid to learn last year but I could not complete it because I was busy with office work
Superior! This one is really cool. You've just raised to the "I can walk on water" level!
Haha, not so sure about that :)
where was this channel all this time, Subscribed!!
Hi VIkas! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
I'm not really into Angular but I just enjoy your videos.
Wow! lot of learning this in a short video! Thanks a lot!
This is one of the best things ever happened to web
If you ever make it to South Africa I would love to meet up with you, so much of what I've learnt is thanks to you.
What would be the appropriate way of including the element.js file in another angular project? Can I use the element.js file to use the web component tags in another project's tag? When I try I get conflict with the web component's zone.js and the main app zone.js dependency.
Awesome feature angular element and awesome tutorials
Hi Satyajoti! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
I love the first angular elements video and can't wait to see this, i had made a chatbot with that. Thanks for all!
Oh wow, that's awesome. I'm building my next website with elements and Firebase. It's a great way to build web apps.
@@Fireship Yeah! Excuse me, it would be awesome you should make a video with Dialogflow or mixing something about crypto, like ethereum. Either way, your channel it's a great guideline. I owe you so much.
I really was surprised that the destructuring with square brackets in the for loop! That's a great tip! I was expecting curly braces! Thanks for the awesome content!
These videos are always top quality! Keep up the great work!
Advanced Angular Elements that's something to look forward to .... Keep up the good work
I would like it if you could go deeper into how to handle nested components using shadowDom slots
Great video. I have a question. If I have a shared dependency like DevExtreme in my element, how do I exclude this from build?
Hey! Are you looking out for jobs in web development currently? We are a web dev company and looking to hire; let me know if interested.
Nice video. Angular is the best framework
Some problems you guys may get stuck on
1. Create 2 angular apps and expose custom elements from each and use them in a third app. : Zone.js is already loaded.
Solution : Use ngx-build-plus or don't use zone at all.
2. TypeError: Failed to construct 'HTMLElement'
Solution : Web components required ES6 classes. Angular by default compiles code to ES5, so either include native-shim polyfill or change compilation target to es2016.
3. Shadow DOM and global styles ?
Solution : This is bit tricky. Use @import or don't use global styles.
4. Shadow DOM in Edge and IE and using ?
Solution: Use shady DOM polyfill.
5. Shady DOM and angular router is buggy: No solution for now.
6. Exclude dependencies
Solution: Use ngx-build-plus. This again is tricky and even more tricky to reimport. Suggestion is to wait for ivy.
Hi Kartik! Thanks for all that information! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Another awesome video to watch from Angular Firebase. You have a great contents, cool 👍🏻
That's really amazing, this allows to reuse angular components inside other frameworks like react 🤯
Nice Demo.
Question: Why not use window.addEventListener("scroll") et remove the listener when the component is visible ?
Is it possible to remove the hostListener ?
Great explanation
1. How can we split up each Element into separate chunks? When we load some of those chunks dynamically into the browser:
A) can they still share an injector?
B) can they share core dependencies so i dont have to load it n-times?
The background: lets say I have 6 elements.
I want userA to use and only know about elements {1-4} and userB {2, 5-6}
Thanks for all your efforts!
01:55
Anyone know the name of this icon theme in VS Code?
Your content is top notch. Thank you.
Hi,
I'm struggling to find a way to create an expandable and collapsible table rows using Angular material,
This could be a parent, child visualisation, which I need to create.
I'll be thankful if you spend some time to crack through the angular material table or some other libraries in Angular. Please have one video over it.. explaining those.
Thanks
Hi Roshan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Wow, Awesome, Its very helpful and help to learn new concepts
Really Helpful
Hi Pranay! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
love Angular. Thanks a lot for the videos.
When I tried to export a few elements with Angular Elements I did have issues that I was unable to debug, so I had to give up and load a whole angular application containing the elements I wanted to use... huge fail. However, this might be related to the issue you are talking about : disabling NgZone. I will have to give it another try. That said, it's a pity that we cannot reliably use NgZone as writing custom elements still feels a bit hacky for this reason.
This is a great start...
But tracking scroll event and checking with boundingRect may not be performant and can cause jank when more images are present in the page.
Could you please use IntersectionObservers in future examples as we expect top notch quality content and best practices from you.
Thanks for the suggestion, that would make a cool video. The browser support is not universal for IntersectionObservers, but I also considered using Rx fromEvent to throttle and unsubscribe from events.
Hi Nanda! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
love this channel
Hey Jeff, awesome tips.
However, shadow DOM is a cool and a strong feature but the browser support really breaks the will to use it. Am currently working on a notification angular element, but not able to use this feature on IE11+. Shady Dom polyfills also did no good. Any pointers?
Did I understand correctly that you didn't use `ngx-build-plus` but instead just concatenated the CLI's build output js into a single `elements.js` file?
Yes, for this demo. I just wanted to point that out as a resource but it requires some setup that would have slowed down the video.
Hi, thanks for the lesson, if I have to pass an array of data as an attribute, should I make JSON.stringify and parse it in my angular component? because of setAttribute only for a string value
and do we have some tools for hot reloading or we have to bundle all the time?
super exited for stencil. and ionic 4
Stencil is awesome, their use of TS decorators is spot on and I hope Angular takes some hints.
Hi! Really nice vid, thanks! One question: does it make sense or is it even possible to create a web component which is quite complex and requires routing, forms, tabs... or should I create instead a library considering this element would not be used outside of an Angular app?
Nice work as always
End-less possibilities with Elements, looking forward to the future
Hi Siva! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
I love Angular and also watch your lovely video
Thanks you
Thank you Keshav
what if we are fetching custom-elements from various sources or different angular projects? would it duplicate the core code generated by angular and is concatenated by the approach u presented? in such case should we leave out the build divided and not single bundled?
Yes, in that case you would want import the umd bundles for your dependencies separetly. Ngx-build-plus can help.
I saw it in its repo’s sample. That kind of narrows down the usage of angular elements to an angular applications. At least imo it would make more sense. Right?
Honestly, I didnˋt quite get the idea behind elements. This way I can embed angular components into non angular websites right? I can See the benefit with SEO this way but how exactly is it more performent? What If I have a really angular heavy website, would it still make sense to split it up in many different angular elements and embed them into a website?
Web components make the most sense when you have server rendered content imo. If you have a highly interactive app that is mostly behind a user auth wall, then the SPA approach is superior.
Awesome video!!!
Best explanation ever!thanks!
Love your videos man!
Awesome 😍😍😍
Hi Ayan! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Thanks for uploading!
that t-shirt looks cool!
Excellent content! Wish I could use this at work!
I am really interested in learning more about all of the build packages, not only for angular but more JS/TS frameworks!
Would you like to see a webpack video? That could be done
I have actually been really confused by webpack for a long time. Even after reading the docs I don't feel like I have a great grip on it. I think a video would be very popular and appreciated. Also, Thank you for all of your videos so far!
@@Kevin192291 Yeah webpack is hard to learn because it's part magic part configurable. Added that to the video list.
With angular 7.2 i get this error :
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Web components required ES6 classes. Angular by default compiles code to ES5, so either include native-shim polyfill or change compilation target to es2016.
Hi Kamal! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
@@shivanigaddagimath6105 is better to switch to inbox, send your ID
@@kamalkamals That's great! I'm not able to post my LinkedIn link here for some reason. Can you please find me on LinkedIn, just @ Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine.
@@shivanigaddagimath6105 done
are slots only for angular elements or also for normal angular components?
Angular has it's own system with ng-template. Slots are a feature specific to web components developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
Great video
Amazing tutorial
it seems promising, probably try it in my new project.
Awesome video. Thanks
Thanks a lot for sharing a knowledge
Hi Sai! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
@@shivanigaddagimath6105 sure
@@saisreenivas2227 That's great! Can we please connect on LinkedIn or gmail for more details? Please @ Shivani Gaddagimath on LinkedIn and request to connect. The first profile that pops up is mine. I'm not able to post my link here for some reason.
@@saisreenivas2227 Hi! Please connect on LinkedIn or gmail if interested in the job opportunity.
Awesome video as always :)
Great stuff! Thanks for this awesome video
Great video, thanks!
Wow just what I needed thank you!! Love your channel 😀.
WINNER!!! You are the lucky T-shirt winner this week, send me a private message with your shipping details and size :) ruclips.net/video/fsVL_xrYO0w/видео.html
So does it make sense building shared components like headers with Angular Elements?
Possibly. My app uses a plain html/css header, but has a login button/dropdown that's a web component.
I love your videos!
Not sure how well supported but there’s this intersectionObserver api which can determine if our object is visible in the viewport. Just for the sake of freshness... love your work
caniuse.com/#search=IntersectionObserver
Octavian Lari average support I’d say. Can be implemented if only major browsers are of your concern
Might cover this in a future video, would def be more performant.
great video, love it!
love the channel
awesome man, thanks for the tutorial!
Great stuff!
Nice content you provide:-)
HI Vikas! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Why not "ng-content" instead of slots?
Slots are are a feature of web components, so it's just matching that standard.
You are fantastic!!
Thx man, a Nevers saw so much dense ainfo knowledge on one place.
Ps. I like your speed
Ps. I like you 👕
Been trying to get a t-shirt from you since a long time now :D
HI Siddhant! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Nice work
Thank you, very ng-useful :)
Love the intro :P
SolidWorks rocks!!
super video
Hi Shubham! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
thank you..
Hi Rahul! Would you be interested in exploring job opportunities in web development currently? We are a web dev company and looking to hire. Please let me know if interested.
Hey men your videos are great your first element video got me a promotion at my job. Love your content. Please jeep doing it 🤝🤝😁
Oh wow, that is awesome, congrats 👍🔥
Thank you for your awesome videos!! I hope I get the t-shirt!! :)
Keep it up bro
Good.✔️
T-Shirt! Yeah! (great vid's too )
Looking forward to fireship
Its awesome.
I want that t-shirt !!!
WE ♥️ WEB COMPONENTS
You're Awesome