Advanced Angular Elements
HTML-код
- Опубликовано: 15 сен 2024
- Learn how to build a high-octane 🚀📦 web component with Angular Elements that lazy loads images and achieves a near perfect lighthouse perf score angularfirebas...
Docs angular.io/gui...
Manfred Steyer's Guide www.softwarear...
Nrwl Top 5 blog.nrwl.io/5...
Web Components www.webcompone...
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
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 :(
👍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.
Game changing. Much like Angular Firebase itself. You're doing God's work here, Jeff.
Jeff + Angular Elements = Pure ingenuity 👍🏼👍🏼
dude I can't tell you how much u're making my life easier around here !!
amazing work
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥Angular Elements (aka Web Components) for the win in 2019!!🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
I'm still new to Angular and I find your videos immensely helpful. Thanks.
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.
This is actually the best part of Angular - Angular elements !!!
Let's go !
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!
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
Don’t know how I went so long without seeing these videos, keep up the good work!
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.
Superior! This one is really cool. You've just raised to the "I can walk on water" level!
Haha, not so sure about that :)
I'm not really into Angular but I just enjoy your videos.
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.
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.
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!
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.
This is one of the best things ever happened to web
Wow! lot of learning this in a short video! Thanks a lot!
These videos are always top quality! Keep up the great work!
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.
That's really amazing, this allows to reuse angular components inside other frameworks like react 🤯
Another awesome video to watch from Angular Firebase. You have a great contents, cool 👍🏻
Advanced Angular Elements that's something to look forward to .... Keep up the good work
Nice video. Angular is the best framework
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.
I would like it if you could go deeper into how to handle nested components using shadowDom slots
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.
I love Angular and also watch your lovely video
Thanks you
Thank you Keshav
Great explanation
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.
love Angular. Thanks a lot for the videos.
Your content is top notch. Thank you.
Thanks for all your efforts!
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.
Excellent content! Wish I could use this at work!
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.
Best explanation ever!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
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}
Thx man, a Nevers saw so much dense ainfo knowledge on one place.
Ps. I like your speed
Ps. I like you 👕
love this channel
Great stuff! Thanks for this awesome video
Great video
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.
it seems promising, probably try it in my new project.
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.
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 👍🔥
awesome man, thanks for the tutorial!
Thanks for uploading!
Awesome video!!!
Amazing tutorial
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 ?
Awesome video. Thanks
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.
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.
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.
Great video, thanks!
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.
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.
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?
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.
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.
that t-shirt looks cool!
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
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?
Love your videos man!
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.
Nice work as always
Thank you for your awesome videos!! I hope I get the t-shirt!! :)
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?
love the channel
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?
Thank you, very ng-useful :)
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.
great video, love it!
Great stuff!
I love your videos!
Awesome video as always :)
ng-cool
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
You are fantastic!!
SolidWorks rocks!!
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.
Good.✔️
01:55
Anyone know the name of this icon theme in VS Code?
Nice work
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.
Looking forward to fireship
WE ♥️ WEB COMPONENTS
Its awesome.
I want that t-shirt !!!
Why not "ng-content" instead of slots?
Slots are are a feature of web components, so it's just matching that standard.
Tshirt plz :P Thx ! Nice Vod btw !
Thanks!!!
T-Shirt! Yeah! (great vid's too )