Angular just deprecated the old animations module. So how do we still do advanced motion? In this tutorial, I’ll show you how to use the modern toolkit: the new enter and leave primitives plus real CSS. By the end, you’ll be able to build smooth enter/leave animations, chain effects in sequence, animate list items, and even add staggered effects, all without the legacy DSL.
Angular gives you so many ways to add styles to a component because, apparently, developers love too many choices and unnecessary suffering.
Ever felt like styling an Angular component is a bit like ordering coffee? You think it's simple, but then you realize there are a million ways to do it! Well, in this tutorial, we're going to break down the many different ways to add styles in Angular components, so you can choose the best approach for your app.
You ever try to theme an Angular component? Yeah… it sounds easy. Just tweak some colors, maybe adjust a layout, how hard could it be? Well, let me tell you, by the time you're done battling :host, :host-context(), and CSS variables, you'll start questioning everything.
Today, we’re diving deep into theming Angular components. We’ll harness the power of the CSS :host and :host-context selectors, along with CSS custom properties. I’ll show you how to create different layout and color styles for a custom card component and discuss the benefits and drawbacks of each approach.
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!
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.
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.
Sometimes you may need to programmatically set the value for a CSS custom property while building components in Angular. I occasionally run into situations where I need to use a custom property based on a dynamic value. Like a bar chart for example, where the items in the chart are based on data from an api. Well in this example, we’re going to look at three different ways to set custom properties programmatically. We’ll use basic style binding, then we’ll use the Renederer2 setStyle() method, and after that, we’ll use host element binding.
If you’ve built apps in angular in the past, I’m sure you’ve experienced the blank screen while you wait for the app to be bootstrapped. In smaller applications, it’s not as noticeable but in larger, more complex applications, we may need to wait for a little bit before we see the actual content loaded. And staring at a blank screen while we wait is not ideal. Well, we can upgrade this experience by adding our own custom loading screen and it’s pretty easy to do too. In this example that’s exactly what we’re going to do.
In Angular 17 we have a couple of new ways to include styles within our components. In this post we’ll take a close look at these new features, and we’ll learn how to use them. Alright, let’s get to it!
Hey there, have you ever needed to programmatically add a class to an element in an Angular application? Like, maybe when a button is disabled, we need a class, but then once it’s enabled, we don’t. Or how about when a form goes from an invalid state to valid? Well, good news, this is actually pretty easy to do in angular. In this post I’m going to show you four different ways. First we’ll use a method called class binding. Next we’ll use the ngClass directive. After that we’ll use the @HostBinding decorator. And finally, we’ll use the Renderer2 addClass() and removeClass() methods. Let’s get to it!