Trying to explain Angular to my grandma was a mistake... but here we are š. In this stand-up comedy bit, Dommy Bytes breaks down the difference between viewChild() and contentChild(), Angular's "view" vs. "content", and why debugging Angular sometimes feels like talking to a passive-aggressive roommate.
In Angular, understanding the difference between "view" and "content" is key to working effectively with components. If you've ever tried querying an element and it didnāt work as expected, itās likely because you were mixing these two concepts up. In this example, weāll break down the difference between the two, and Iāll show you how Angularās signal queries make accessing both simple and reactive.
Have you ever tried adding animations to your Angular app and suddenly felt like you were directing a Broadway show instead of coding? Well, you're not alone.
Ever tried styling a component in Angular? Itās not just CSSāitās an event! From class binding to ::ng-deep, from ViewEncapsulation to the mystical powers of !important, this is the wild world of Angular styling!
Angular folks, this oneās for you! Ever feel like your components are just tiny digital apartments trying to live their best life? Well, letās talk about itāSeinfeld style!
Have you ever felt like some of the dynamic expressions in your Angular component templates are a tangled mess? What if I told you we now have a cleaner, more modern way to handle dynamic classes, styles, and even complex interpolations, without the headache?
In this beginner-friendly tutorial, Iāll guide you through everything you need to know about Content Projection in Angular. Youāll learn how to inject dynamic content in components, create multiple content slots, use advanced techniques, and even implement fallback content for maximum flexibility. By the end, youāll be able to build flexible, reusable components with ease.
Not all Angular component selectors are created equal! Choosing the right one can impact your appās flexibility and maintainability. In this tutorial, Iāll walk you through all the component selector options in Angular, helping you decide which one best fits your component. By the end, youāll know exactly which selector to use and why!
Styling Angular components can be tricky, especially with encapsulated styles. But :host and :host-context let you target a componentās root element and adapt styles based on its contextāwithout global CSS hacks. In this guide, you'll learn how to apply, modify, and control styles using these selectors, making your components smarter and more flexible. Letās dive in!
Recently, I created a tutorial about how to avoid ::ng-deep when styling Angular components. Many of you didnāt like the techniques I provided so I thought it would be good to follow up to clear up some misconceptions and provide more specific examples. In short, I think you should try to avoid using it because its use is discouraged by the Angular team. In this example, Iāll explain why and Iāll show you some things that I like to do instead.
Did you know that in Angular, your component template doesn't have to be limited to HTML? It can also be an SVG! In this tutorial, we'll explore how to render SVGs as component templates and use Angular features to make them dynamic and interactive.
Is your Angular app loading content users never see? Letās fix that! In this tutorial, weāll boost performance with deferred loading and add sleek animations to make components pop as they enter the viewport. Letās dive in!
Hello, and welcome to this Angular tutorial! Today, weāre diving into one of the most essential topics for forms: validation and error messages. We'll take a basic form and provide several validation messages to help guide users. Plus, we'll level up with additional checks like email validation and even visual feedback for the form's status as a whole.
Hey everyone, welcome back! In this tutorial, weāre diving into something thatās been a challenge in the past for Angular developers, the need to break style encapsulation in certain cases with ::ng-deep. Itās been deprecated for quite some time but there are still times where we need to use it. Or at least there used to be. Now, we have modern solutions that not only replace ::ng-deep but can also make code cleaner and more maintainable.
Hey there Angular peeps, ready to create another animation with me? In this tutorial, weāre going to add a smooth expanding and collapsing animation to our project to make it not just functional but dynamic and polished. Weāll kick things off with the basics and then weāll take it up a notch with some more advanced concepts towards the end.
Hey there, Angular fans! So, signals are a fairly new concept in Angular but Iām sure many of you out there are using them often. And if youāre anything like me, when using writable signals, youāve probably found yourself wondering when to use the set() vs. the update() method. Well, in this tutorial, weāre diving into this question to help you understand why you may want to use one over the other.
The new linkedSignal primitive in Angular 19 is a pretty handy new feature. In a previous tutorial we looked at the basics, but in this tutorial, weāll take it a little further and look at a more advanced feature where we will compare the new and old values of the source signal to provide āsmartā signal updates. Ok, letās get started.
Hey there Angular folks, and welcome back! In this tutorial, weāre tackling an exciting update in Angular: how to modernize your components by migrating from the traditional @ContentChild and @ContentChildren decorators, and QueryList, to the new signal-based contentChild and contentChildren functions.
Angular 19 is here and that means that itās time to learn some new stuff. In this tutorial, weāre getting hands-on with Angularās latest signal feature, the linkedSignal() function. Itās a powerful way to create signals that are both writable, and that automatically update based on changes in other signals without improperly using the effect() function. Letās dive right in and see how this new function can streamline reactive updates in your Angular Apps!
If youāve been working with Angular for very long, youāre probably pretty familiar with the @ViewChild and @ViewChildren decorators. Well, if you havenāt heard yet, the framework is moving away from these decorators in favor of the new viewChild and viewChildren signal query functions. This means that itās time for us to make the switch! In this tutorial weāll take an existing example of both decorators and convert them each to the new respective functions.