Angular

Your First Custom Validator in Angular Signal Forms (Step-By-Step)

November 13, 2025

Custom validators are one of those things you'll definitely need when building real-world forms. But if you've been wondering how they work with Angular's new Signal Forms API, you're in the right place. Today we'll migrate a form with custom validation from Reactive Forms to Signal Forms, and I think you'll be pleasantly surprised by how straightforward it is. The syntax changes are minimal, and the result is cleaner, more reactive code.

Angular Angular Forms Angular Signals

"Reactive Forms Are Just as Good." Okay, Watch This.

November 06, 2025

I've made a few tutorials on Signal Forms now, and I've seen the comments. Some of you said the old Reactive Forms way is just as good, or you just still like it better. And I get it. Maybe the benefit hasn't been obvious. So today, I'm going to show you a real-world form (the kind that gets messy fast) and we're going to rebuild it using Signal Forms. By the end of this post, hopefully you'll see the advantage, not just hear me say it.

Angular Angular Forms Angular Signals

Goodbye FormArray. Hello Signal Forms.

October 30, 2025

Building dynamic forms in Angular has always felt a little like assembling IKEA furniture without the instructions. But soon, there will be a simpler, more reactive way. One that actually feels reactive. In this tutorial, we’ll take a dynamic form built with classic Reactive Forms and upgrade it to use the new Signal Forms API. It's still experimental, but what it can already do will make you wish it wasn’t.

Angular Angular Components Angular Forms

I Deleted Half My Code When I Switched to Signal Forms

October 23, 2025

If you've ever built a custom control using ControlValueAccessor, you know the drill. It requires several methods, properties, and even providers. Often, it can be a lot just to update a simple value. Well, in Angular 21, that's beginning to change. In this tutorial, we'll migrate a custom quantity control step by step from CVA to signals so you can see just how clean and simple things can become.

Angular Angular Forms Angular Signals

Migrate Reactive Forms to Signal Forms

October 16, 2025

Angular’s experimental Signal Forms just landed, and in this tutorial, we’ll migrate a real-world Reactive Form to this new model. Same user experience, cleaner, truly reactive code. Let’s check it out!

Angular Angular CDK Angular Components

Make Any List Draggable in Minutes

October 09, 2025

Ever built a list in Angular and thought, "It’d be awesome if I could just drag these items around to reorder them?" Well, what if I told you that you can? And it’s ridiculously easy! In this tutorial, we’ll add drag-to-reorder functionality to a todo list using Angular’s CDK. No extra libraries, no complex setup, just clean, modern Angular.

Angular Angular Animations Angular Components

Animation Start/Done? Dead. Long Live CSS + DOM Events

October 02, 2025

A while back, I made a tutorial showing how to hook into Angular’s animation start and done events. That example has helped a lot of people, but since then, Angular officially deprecated the animations module. So in this updated tutorial, we’re going to take that same example and modernize it using pure CSS keyframes, Angular signals, and standard DOM events.

Accessibility Angular Angular CDK

Make Any List Keyboard-Friendly in Minutes

September 25, 2025

Imagine your Angular application, but effortlessly usable by everyone. Sound too good to be true? Well, it’s not. In this tutorial, we’ll unlock a secret to building highly accessible components using a powerful Angular feature you might be overlooking: the ListKeyManager. Get ready to quickly enhance and create interfaces that truly serve all users.

Angular Angular CDK Angular Components

Teleport a Component in Angular (and Keep Its State)

September 18, 2025

Have you ever moved a component across your layout and watched your state just vanish? In this tutorial, we'll try to avoid this with three different approaches: ng-template with ngTemplateOutlet, the CDK Template Portal, and the CDK DomPortal. You’ll see when Angular recreates views and how to move a live component without losing state. Stick around until the end and you’ll leave with a one-line rule you’ll never forget...

Accessibility Angular Angular Components

Can You Even Use Jump Links in Angular? (Yes… Here’s How)

September 11, 2025

Have you ever wondered if you can add jump links in Angular? With plain HTML you simply use an anchor and an ID, but in Angular that doesn’t really work. In this tutorial, I’ll show you the right way to build smooth, router-friendly jump links. And by the end, your pages will jump and scroll better than ever!

Angular Angular Animations Angular Components

Modern Angular Animations: Ditch the DSL, Keep the Power

September 04, 2025

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 Angular Components Angular Signals

The Many Personalities of Angular’s viewChild (the Read Parameter)

August 28, 2025

Most Angular developers know about viewChild(), but many don’t know about its secret weapon, the read parameter. In this tutorial, I’ll show you how you can use it to unlock completely different scenarios inside your components. By the end, you’ll not only understand what it does, you’ll be using it to write cleaner, more powerful Angular code.

Angular Angular Components Angular Debugging

Tired of Console Logs? Meet Angular’s Signal Graph

August 21, 2025

Angular recently released something pretty neat: a new debugging tool that changes everything about how we understand our applications. It’s called the Signal Graph, and it was introduced in Angular 20.1 just a few months ago. If you’ve ever felt like you’re debugging in the dark, this tool will flip the lights on.

Angular Angular Components Angular Signals

I Built the Smoothest Countdown Timer in Angular

August 14, 2025

You know those session timeout warnings that pop up in apps right before you get kicked out? Ever wanted to add one to your own Angular app? Well, today we’re doing exactly that. We’re building a real-time countdown timer with smooth animations, color-coded warnings, and a “time’s up” message your users can’t miss.

Angular Angular Components Angular Signals

Switch Between Grid & List Views in Angular: Easy & Flexible

August 07, 2025

You know those view toggle buttons? Grid view, list view, they're everywhere. Gmail has them, GitHub has them, pretty much every app with a list has them. Today, I'll show you how to build one in Angular that's incredibly flexible. It can switch between simple CSS classes or completely different component trees. This guide walks you step-by-step through building a reusable Angular grid/list toggle component with both internal and external state management.

Angular Angular Animations Angular Components

Angular Enter/Leave Animations in 2025: Old vs New

July 31, 2025

Angular just released a brand new animation API that's lighter, allows for hardware acceleration, and is flat-out simpler than the old system. In this tutorial, we're updating my previous :enter and :leave animations guide to use this cutting-edge approach available in Angular 20.2.0-next.2. Ready to get ahead of the curve? Let's go!

Angular Angular Animations Angular Components

Build the Perfect “Show More” Component in Angular

July 24, 2025

Ever built a "read more" component that just brutally chops off content mid-sentence? We've all been there. Today, I'll show you how to quickly build out a smooth expandable content component in Angular that actually looks professional. We'll start with a basic toggle that does absolutely nothing visual and transform it into something with elegant height transitions and a subtle fade effect. Okay, let's turn this sad excuse for a component into something you'd actually want to show off!

Accessibility Angular Angular CDK

Just Another Angular CDK Feature Nobody Talks About

July 17, 2025

Your UI treats every user exactly the same, and it might be driving them crazy. Keyboard users get identical experiences to mouse users. Code programmatically focuses elements and triggers the same aggressive responses as intentional user actions. The Angular CDK's Focus Monitor can detect exactly how users interact with any element: mouse clicks, keyboard navigation, touch, or programmatic focus. And I’ll bet 90% of Angular developers have never heard of it.

Angular Angular Components Angular Directives

One Slot? Two Slots? Conditional Slots? Solved.

July 10, 2025

You’ve probably built a layout component in Angular, maybe a card or a panel, tossed in a few content slots and called it a day. But then, things get weird. What happens when you need more than one slot in a component? And what happens when you have a conditional slot, and none gets passed in? Or when you want the same projected slot to appear in two different places, conditionally, depending on the layout?

Angular Angular Components Angular Model

Can linkedSignal Use Multiple Sources? Yes, Here’s How!

July 03, 2025

Ever wonder if there’s a way to get all the power of reactivity in Angular, without chaining together a dozen RxJS operators just to keep your UI in sync? Well, there’s a better way, using signals. In this tutorial, I’ll show you how to move beyond observables, and reveal the secret power of linkedSignal(), combining multiple signals for truly modern, reactive Angular code.

Angular Angular Animations Angular Components

I Updated My Component Host Animation… Here’s the Angular 20 Way

June 26, 2025

If you’ve been building Angular apps for a while, like I have, you know the framework evolves fast. In this tutorial I’m going to show you how to modernize an older app step-by-step using the latest Angular features… modern host bindings and events, control flow, and signal inputs. By the end, your code will be smaller, a little faster, and overall more modern. You’ll see exactly how to quickly modernize several aspects of an existing application.

Accessibility Angular Angular Components

Event Listening in Angular: The Updated Playbook for 2025

June 19, 2025

A couple of years back, I created a tutorial that showed four ways to listen for events in Angular. But Angular moves fast… so today, we’re updating that playbook for modern Angular, with the latest, cleanest ways to handle browser events. Whether you want simple clicks or global events, you’ll see it all, plus a bonus technique that makes state sync easier than ever.

Angular Angular Components Angular Directives

Step-by-Step: Create a Click Outside Directive in Angular

June 12, 2025

Have you ever built something like a dropdown menu, clicked to open it… and then realized you forgot to make it close? Yeah. Me too. You click outside... nothing happens. You click harder, like somehow that’ll help... still nothing. Well, in this tutorial, we’re going to fix that by building a modern “click outside” directive.

Angular Angular Components Angular Signals

I Built a “Cooldown” Button in Angular… Here’s How

June 05, 2025

Let’s be real, few things in UX are as annoying as a trigger-happy button that just keeps firing. Whether it's a feedback form or a password reset request, sometimes... a button just needs to chill. So in this post, we’re building a smart “cooldown” button in Angular. One that disables itself after each click, shows a countdown, and prevents those frantic double submits. All with no external dependencies, just modern Angular features like signals and good ol’ setInterval().

Angular Angular Components Angular Directives

Show It Once, Then Never Again… One-Time UI in Angular

May 29, 2025

Have you ever wanted to show a banner, tooltip, or onboarding message just once, and then hide it forever? Like… "We get it. Thanks for the message. Please don’t show it again." In this tutorial, I’ll show you a clean, modern Angular 19+ approach for one-time UI using local storage, signals, and finally a reusable structural directive you can drop anywhere in your app.

Angular Angular Components Angular Directives

exportAs in Angular: What It Does and When to Use It

May 22, 2025

Ever built a directive exposing public methods or signals… only to realize you can’t cleanly access them when using it in another component template? In this tutorial, we’ll fix that using exportAs, signals, and a modern declarative API, just like Angular Material sometimes does.

Angular Angular Components Angular Inject

You Might Not Need That Service After All 💉

May 15, 2025

Ever felt like your Angular components are playing telephone, passing messages up with outputs, down with inputs, or just screaming across the app through a service? In this tutorial, I’ll show you a different way to pass context down, or back up, without relying on a shared service. We’ll inject a parent, or even a grandparent, component directly.

Angular Angular Animations Angular Components

Nobody Wants to See a Blank Screen… Build Smarter Loaders!

May 08, 2025

When your app loads data, what do users see, a blank screen, a lonely spinner? Today we’re going to build something better: a smart skeleton loader that instantly shows your UI structure, feels fast, and transitions smoothly into real content as soon as it’s ready. And we’re doing it the modern Angular way: using deferred loading to manage content rendering, signals to track state reactively, and animations to make the transition feel seamless. By the end of this tutorial, you’ll know how to build a loader that’s not just functional, but delightful.

Angular Angular Components Angular Form Control

Still Using ControlValueAccessor? It Might Be Overkill 🤷

May 01, 2025

If you've ever built a custom form control in Angular, you've probably run into the ControlValueAccessor, and if we're being honest, it's a lot. In this tutorial, I'll show you how you might not need it at all. Instead, we'll simplify things using modern Angular features like signal inputs and direct form control bindings. No interfaces, no providers, no boilerplate — just clean, reactive code.

Angular Angular CDK Angular Components

Toast Notifications in Angular? Easier Than You Think!

April 24, 2025

In this tutorial, I’ll show you how to add beautiful, toast-style snackbar notifications using Angular Material. We’ll even take it a step further and trigger a full-screen help overlay from the snackbar action itself. And the best part? It’s lightweight, fully customizable, and you don’t need any third-party libraries to make it happen.

Angular Angular CDK Angular Components

How to Build a Resizable Sidebar in Angular (Step-by-Step)

April 17, 2025

Hey everyone, in this tutorial, we’re going to add a resizable sidebar to an existing Angular app, and we’re going to do it using just the Angular CDK. No random libraries or weird hacks. If you’ve ever wanted to create a sidebar like the ones you see in VS Code or design tools, where you can click and drag to resize the panel, that’s exactly what we’ll be building.

Angular Angular Components Angular Input

How Angular Components Should Communicate in 2025

April 10, 2025

Ever wondered how Angular components actually talk to each other? Maybe you’ve been juggling inputs and outputs... or maybe you’ve heard whispers about this mysterious new model input. Well, in this tutorial, we're going to break it all down. We’ll start with a barebones component and add real-time communication between a parent and child — first with inputs and outputs, then with the newer model input approach.

Angular Angular CDK Angular Components

The Easiest Way to Add a Modal in Angular

April 03, 2025

Want to add a modal to your Angular app without pulling in some random library or writing a ton of boilerplate? In this tutorial, I’ll show you how to build a clean, fully-functional modal using the Angular CDK Dialog. You’ll learn how to open any component in a modal, style it properly, and even add a little custom behavior. Let’s dive in!

Accessibility Angular Angular Components

Turn Any Angular Component Into a Powerhouse with This Trick!

March 27, 2025

In this tutorial, we're going to enhance a simple Angular button component by applying custom directives, and then we’ll combine these directives into the component directly using Angular's Directive Composition API feature. Let’s get started!

Angular Angular Components Angular Form Control

Build a Dynamic Checkbox Form in Angular with Reactive Forms!

March 20, 2025

Today, we're building a dynamic checkbox form in Angular using Reactive Forms. We’ll allow users to select multiple values from a list and display the selected values in real time. Then, we’ll take it a step further by adding a "Select All" checkbox so users can toggle everything at once. Let's get started!

Accessibility Angular Angular Components

3 Ways to Handle Page Titles in Angular (Beginner to Advanced)

March 13, 2025

Have you ever navigated an Angular app and noticed that the page title stays the same? That’s bad for SEO, accessibility, and user experience! But don't worry, in this tutorial I'll show you how to automatically update the page title based on your routes. And for those using dynamic routes, I’ll show you how to handle dynamic titles too. Let’s jump in!

Angular Angular Components Angular Styles

Every Way to Style an Angular Component (but funny)😂

March 10, 2025

Angular gives you so many ways to add styles to a component because, apparently, developers love too many choices and unnecessary suffering.

Angular Angular Components Angular Styles

Every Way to Add Styles in Angular... Which One Should You Use?

March 06, 2025

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.

Accessibility Angular Angular Components

Angular Theming... A Stand Up Special No One Asked For

March 02, 2025

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.

Angular Angular Components Angular Styles

How to Theme Angular Components Like a Pro

February 27, 2025

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.

Angular Angular Components Code Jokes

Explaining Angular to My Grandma

February 21, 2025

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.

Angular Angular Components Angular ContentChild

Understanding View vs. Content in Angular

February 20, 2025

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.

Angular Angular Animations Code Jokes

Angular Animations: A Love Story

February 19, 2025

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.

Angular Angular Components Angular Styles

Styling in Angular and other life lessons

February 15, 2025

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 Angular Components Angular Styles

Components are Just Tiny Digital Apartments 😂

February 14, 2025

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!

Angular Angular Components Angular Styles

Untagged Template Literals... The Upgrade You Didn’t Know You Needed!

February 13, 2025

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?

Angular Angular Components Angular Styles

The Beginner's Guide to Content Projection in Angular

February 06, 2025

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.

Angular Angular Components Angular Styles

Component Selectors in Angular: Everything You Need to Know

January 30, 2025

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!

Angular Angular Components Angular Forms

Angular Styling Secrets: How to Use :host and :host-context Like a Pro

January 23, 2025

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!

Angular Angular Components Angular Styles

Seriously Though, You Don't Need ::ng-deep

January 16, 2025

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.

Angular Angular Components Angular Forms

Turn Basic Angular Components into Interactive SVGs!

January 09, 2025

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.

Angular Angular Animations Angular Components

Deferred Loading + animations: Improved Performance, Cool Effects

January 02, 2025

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!

Angular Angular Components Angular Form Control

Angular Forms: Validation Made Simple

December 27, 2024

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.

Angular Angular Components Angular Styles

Stop Using ::ng-deep… What to do Instead

December 20, 2024

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.

Angular Angular Animations Angular Forms

Dynamic expand and collapse effects in Angular: A Simple Guide

December 13, 2024

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.

Angular Angular Components Angular Forms

Angular Signals: set() vs. update()

December 06, 2024

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.

Angular Angular Effects Angular Signals

linkedSignal(): Beyond the Basics

November 29, 2024

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.

Angular Angular Components Angular ContentChild

Don’t Use @ContentChild/Children Decorators! Use Signals Instead

November 22, 2024

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 Angular Effects Angular Forms

Angular's New linkedSignal() Explained

November 15, 2024

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!

Accessibility Angular Angular Components

Stop Using @ViewChild/Children Decorators! Use Signals Instead

November 08, 2024

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.

Angular Angular Components Angular Effects

Angular Effects Gone Wrong? Here’s an Example… Includes a Fix!

November 01, 2024

Effects in Angular are pretty new but have definitely stirred up some controversy in their short time as part of the framework. Basically as far as I understand it, the main goal with the effect function is to handle things related to signals, that you really have no way to do otherwise. And as the Angular docs point out, “effects are rarely needed in most application code”. But there are some totally valid use cases.

Angular Angular Components Angular Effects

The @Input Decorator is Out… So Is ngOnChanges. Now What?

October 25, 2024

Hey there, Angular folks, and welcome back! If you're still using @Input decorators and ngOnChanges() for managing states, this tutorial is for you! We’ll take two simple forms that are enabled and disabled programmatically based on an @Input and refactor them to use Angular’s latest signal-based approach.

AI Code Editor AI Coding Assistant Accessibility

Cursor AI Took My Job… or Did It? Angular Dev Edition

October 18, 2024

If you want to be a good developer, probably the most important thing to do is to continue to learn and adapt as things change. So, I’m going to try to help you do exactly this. I’m going to show you a tool that I started using recently. It's so good that I don’t want to go back. This tool is called Cursor and it makes development more fun and more productive.

Accessibility Angular Angular Components

Mastering the Angular Currency Pipe... Easy Money!

October 11, 2024

Many developers struggle with displaying currency correctly, especially when dealing with different locales and formats. This is because currency formatting can be complex, with many variables to consider such as decimal separators, currency symbols, and number formatting. It's not just about displaying the currency, but also about making sure it's easily readable and understandable by all users.

Angular Angular Components Angular Pipe

Mastering the Angular Date Pipe… It's About Time!

October 04, 2024

Many developers struggle with formatting dates correctly for different locales and use cases, leading to inconsistent user experiences. When working with dates, it's easy to get caught up in the complexity of formatting options, which can result in a mess of code that's hard to maintain. Inconsistent date formats can also lead to confusion among users, and even worse, errors in calculations or data analysis.

Accessibility Angular Angular Components

Stop Adding Repetitive Code in Components! Use ngTemplateOutlet Instead

September 27, 2024

When building Angular applications, we've all been there - stuck with repetitive code that's makes our app large and hard to maintain. We've got sections of code that do similar tasks, but with slight variations, and we copy-paste them in many places. Sometimes throughout the whole app, and sometimes even within a component template. This leads to a mess of code that's difficult to read and update.

Accessibility Angular Angular Components

Got an Angular form? Cool, is it Accessible?

September 20, 2024

How do people without arms, people who can’t see well, people who can’t hear, or who have other disabilities, use your application? Making forms accessible in Angular is crucial, not just because it's the right thing to do, but also because it can greatly enhance the user experience for everyone, regardless of their abilities. By doing so, we can ensure that our application is usable by as many people as possible, which can ultimately lead to a better user base and even more business opportunities. In this tutorial we’ll cover several things we can do to greatly improve the accessibility of a basic Angular form.

Angular Angular Components Angular Form Control

Add an Angular Form Control, Do Cool Form Stuff

September 13, 2024

Forms are a pretty big deal in any application really and, if you didn’t already know or haven’t had much experience with it yet, Angular has you covered with the Reactive Forms Module. In this example we’ll create a basic form control and then add several enhancements to the form overall based on the validity and interaction states of the control. By the end of this tutorial, you’ll be able to quickly add your own form controls and create some very useful forms.

Accessibility Angular Angular Components

Need to Toggle Some Content in Angular? Here's How You Do It

September 06, 2024

Hello and welcome to another Angular tutorial. In this example I’m going to cover how to create something that I need often, a toggle button. This type of button controls the visibility of some sort of associated content. We’ll look two main approaches, one where we use a class and some CSS to control the visibility, and another where we use conditional logic to insert content into or remove it from the DOM. We’ll also look at a couple of bonus variations with the class-based, CSS approach too.

Angular Angular Animations Angular Components

Create a Cross-fade Animation

August 30, 2024

There are a handful of animations that are commonly found in various applications that you probably use every day. I’ll bet you don’t even notice them or give them much thought. These apps just feel easier to use and more intuitive. In this example I’ll show you how to use one that I need often, a crossfade animation where there’s some content fading out while some other content fades in.

Angular Angular Animations Angular Components

Create a Basic Flip Animation

August 23, 2024

There are certain animations that are commonly found in a lot of different applications. They are common because people are used to the way they feel, and they are good at conveying interactions and the meaning behind them. One of these types of animations is a flip animation where you have some content and then, through some sort of interaction, it needs to flip over and reveal the content from the opposite side. We’ll this is what we’re going to create in this example.

Angular Angular Styles CSS

CSS Shapes: What are They?

August 19, 2024

So what exactly are CSS Shapes? Well, it’s probably easiest to understand what they are by contrasting them with what they are not. So let's look at some examples.

Accessibility Angular Angular Animations

CSS Shapes: Introduction

August 19, 2024

When designing for print, the sky is the limit. We can really push the envelope especially when it comes to layout. We can wrap content around any shape we’d like. But on the web, everything is contained within rectangles. We’ve been pretty creative while building in this boxy world but what if we could break free and build designs more similar to those found in editorial design?

Angular Angular Animations Angular Components

Create a Slide-in/Slide-out Animation

August 16, 2024

When you build things in Angular, you’ll probably end up wanting or needing to add animations and transitions to parts of your UI. One very common one is a “slide-in” or “slide-out” animation where an item transitions from a hidden to a visible state. And since this is something that you’re likely going to need at some point, I figured that I’d show you how to create one. So that’s what we’re going to do in this post.

Angular Angular Effects Angular Signals

Feeling the Effects With the Angular effect() Function

August 01, 2024

Signals are a pretty big deal in Angular now a days. I’ve created several videos on them recently because there’s a lot to consider when using them. As you use them more over time, you’ll probably run into scenarios where you need to execute code when signal values change. Now, one way to do this is to use computed signals which is something I’ve covered in the past, but there is a possibility that even this won’t work for your situation. We’ll if this is the case, there is another possibility. You can use the effect function.

Accessibility Angular Angular Components

Create a Signal From Another Signal

August 01, 2024

Signals are now a core concept in the Angular framework. When you build components, directives, and services, you’re going to want use them going forward. And as you do, at some point you’ll likely ask yourself the question: how can I create a signal based on the values from another signal? Well, in this post, I’m going to show you how, and it won’t take very long either!

Angular Angular Components Angular Styles

3 Ways to add Dynamic CSS Custom Properties in Angular

July 25, 2024

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.

Accessibility Angular Angular Components

Template variables in Angular using the new @let syntax

July 19, 2024

In Angular, we can now create variables for reuse right within our component templates. Now that might seem odd but it’s actually pretty cool. If you’re like me, you may have a hard time understanding the benefits at first. So, in this example, I’ll show you how to create these template variables, and then I’ll show you several different possible use cases and benefits to help you better understand why you may want to use them in your projects.

Angular Angular Animations Angular Components

Create a Custom Loading Screen in Your Angular App

July 05, 2024

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.

Angular Angular Components Angular Directives

Host Decorators Are Dead… Use Host Element Binding Instead

July 05, 2024

In the newest versions of Angular, the @HostBinding and @HostListener decorators are no longer intended for use. As the new documentation states, they “exist exclusively for backwards compatibility”. There’s a new, more streamlined way to do this type of thing, and if you’ve worked with Angular in the past, it may look familiar to you. It’s kind of an old concept made new again. In this video we’ll look at a couple of examples I created for past videos about these decorators, and we’ll replace them with the newer methods. Also, we’ll update a few other concepts in these components and directives along the way too. Ok, let’s start with a @HostBinding example.

Angular Angular CDK Angular Components

Angular CDK: Auto-Resizing Textareas!

June 28, 2024

By default, an HTML textarea control doesn’t expand or contract as content is added and removed. Sometimes this is ok, but often it would be better if we did have some control where we could allow the height to resize automatically, to better fit the content. Well, this is possible and, in fact, it’s really easy to do in Angular when using the CDK. In this example I’ll show you just how easy it is. Alright, let’s get to it!

Accessibility Angular Angular CDK

Angular CDK: The Accordion Module

June 21, 2024

An accordion component is a component that has one or more expandable sections within it. It’s pretty common to have the need for this type of thing when building apps in Angular. And, it’s not the most difficult thing to do even if you’re creating your own from scratch but the CDK makes it really simple. In this example I’ll show you just how easy it is. And after we create the accordion using the CDK, we’ll even make it accessible with some ARIA. Alright, let’s get to it!

Accessibility Angular Angular Animations

Angular Animations: Router Transitions

June 14, 2024

If you’ve ever worked with an Angular application that has routing, you may have wanted to add transitions as you navigate between routes. It just makes the app feel more elegant overall. Well, if you didn’t know, this is totally doable with the Animation module and in this example, I’ll show you just how easy it is. Alright, let’s get to it.

Accessibility Angular Angular Components

Router Link Accessibility Features

June 08, 2024

Making apps that are accessible for everyone can be a challenge for many developers. If we don’t have any real issues using devices or seeing what’s on the display, it can be easy for us to overlook simple things that are really important for those of us who don’t have this luxury. So, we need to continually learn how we can be better at this and how we can leverage the tools we already have to help. In this example, I’ll show you how we can easily make an existing breadcrumb list component more accessible for everyone, with a few directives from the Angular Router Module. Alright, let’s get to it.

Angular Angular CDK Angular Components

Angular CDK: Copy to Clipboard

June 01, 2024

When we build things with Angular, we often find ourselves needing to do stuff that we see on the web or in other applications every day. Like copying text to the clipboard for example. Something like that could take a little work to pull off if we were creating it from scratch. But one of the benefits of working with a framework like angular is that many of these common application concepts have already been figured out for us and made available by either the framework itself or, in this case the Component Dev Kit (a.k.a., CDK). So, in this example we’ll see just how easy this task is thanks to the CDK. Alright, let’s get to it.

Angular Angular Components Angular Signals

Using @HostBinding with Signals

May 25, 2024

If you’re building apps with Angular, you’re probably using signals more and more every day. This can definitely be a challenge at times because it’s such a different way of working. And, there are things that just don’t quite work with signals yet, like @HostBinding for example. Well in this post, I’m going to demonstrate how we can actually use the @HostBinding decorator with signals, pretty easily right now even though the decorator was not originally built to support them directly. Alright, let’s get to it.

Accessibility Angular Angular Animations

Angular Animations: Disable/Enable Animations

May 19, 2024

I’m willing to bet, that if you’ve spent very much time working with Angular animations, you’ve had the need or desire to disable them for one reason or another. Something that I encounter quite a bit are animations that run on component initialization. I may only expect them to run when an interaction occurs, or when data changes, or something along those lines. I don’t expect them to run on initialization, but they do anyway. Well, this is something that I’m going to show you how to fix in this post. Alright, let’s get to it.

Accessibility Angular Angular Animations

Angular Animations: Creating Reusable Animations!

May 11, 2024

As an Angular application grows over time, you probably find that you constantly need to refactor things so that shared concepts, logic, behavior, etcetera can be reused. You build things, then later down the road, you build something that needs to do something similar and now you want to breakout that concept so that it can be shared right? Well, animations in Angular are the same. Once you start building and using them, you probably find that you need to use them in multiple components. Well, in this post I’ll show you how to do this. Alright, let’s get to it.

Accessibility Angular Angular Animations

Angular Animations: Adding Flexibility with Params!

May 04, 2024

When working with Angular animations, have you ever found yourself needing to provide custom configurations to a specific animation? Like, what if you have something that uses a next button and you want to animate to the right in that case, but then you also have a previous button, in which case you want to animate to the left instead? Well, if you didn’t know this already, this is totally doable with Angular animation options and the params object specifically. And in this post, I’ll show you exactly how to set them up, and use them. Alright, let’s get to it.

Angular Angular Components Angular Styles

Adding Native Fallback Content for Slots in Angular Components

April 26, 2024

When building Angular components, have you ever found yourself looking for a way to provide fallback content for projected content slots using the ng-content element? If so, you’ve probably been able to find some work arounds to do it but, they’re probably not something you really want to do. It would be better if this concept was built-in to the framework, right? Well, this is actually happening in the latest versions of angular. In this post I’ll show you exactly how it works. Alright, let’s get to it.

Angular Angular Components Angular Directives

Signal Queries: Angular viewChild() and contentChild() Functions

April 20, 2024

If you work in Angular and haven’t heard yet, many things are in the process of switching away from decorators over to signals. I’ve already shown you how component or directive inputs have changed over from the @Input decorator to signals with the input() function. In this post we’ll take a look at how we can convert the @ViewChild and @ContentChild decorators over to signals with the viewChild() and contentChild() functions. We’ll take an example application that I previously created for a demo about the @ViewChild and @ContentChild decorators, and we’ll switch them over to the new signal functions producing the same end result. Ok, let’s get to it!

Accessibility Angular Angular Components

Replacing Static Inputs with the Host Attribute Token

April 13, 2024

If you build things with Angular, you probably already know that you need to keep up with the framework as it evolves over time. Well, in this post, I’m going to help you do just that. We’re going to take a look at the new HostAttributeToken injection token and why you may want to use it. In this post we’ll use an example of an existing button component with inputs and we’ll replace them with the inject() function and the HostAttributeToken class. Alright, let’s get to it!

Angular Angular Animations Angular CDK

Converting Observables to Signals in Angular

April 07, 2024

Signals are changing the way we do many things in Angular. You’ve likely encountered Observables if you’ve worked in the framework for very long. They’re a pretty handy way to stream values emitted over time to subscribers providing a way to react to these events as needed. But often when using them, we also need to trigger Change Detection in order to properly update items within views. With Signals, Observables are not being replaced, they still have use cases, but we can actually transform them into signals when needed. This can help with Change Detection and can often simplify the code overall. In this post we’ll convert a couple of Observables from an existing example over to Signals. Alright, let’s check it out.

Accessibility Angular Angular Animations

Angular Animations: Animating to an Unknown Height

March 29, 2024

Have you ever tried to animate an element to an unknown height with CSS alone? If so, you’ve probably found that it’s not as easy as it seems. To animate a CSS height, you need to animate to a specific value, one hundred percent and auto both won’t work. You can transition max-height but this means that you probably need to use a random arbitrary value that may not work in all cases. It’s just weird and may not even work depending on what you’re trying to do. Well, this is something that is available with Angular animations. In this post, I’ll show you how. Alright, let’s get to it.

Angular Angular Components Angular Signals

Signal-Based Inputs and the Output Function

March 24, 2024

In newer versions of Angular, a pretty significant change is coming with Signals. If you work with Angular and haven’t heard about them yet, you’re in the right place. In this post you’ll learn what they are, at a high level, and you’ll learn how to use the new signal-based inputs along with the new output function in components. We’re going to take a look at an example using the existing @Input and @Output decorators and we’ll convert it over to signals and the output function. I’ve been using signals a lot lately and I can assure you, It’s a change. Definitely a different way of thinking. Alright, let’s get to it!

Accessibility Angular Angular Animations

Angular Animations: Animating Multiple Items in Parallel

March 15, 2024

If you’ve spent any time creating animations in Angular, you may have noticed that the animations added within component metadata run sequentially. Meaning, they’ll run in the order they are added within the array. Well, sometimes this works fine, but sometimes it doesn’t. Sometimes, we need multiple animations to run in parallel to orchestrate them properly. Well, good news for us, Angular has a solution for this. In this post I’ll show you why, and I’ll show how you can animate things in parallel. Alright, let’s get to it.

Accessibility Angular Angular Animations

Angular Animations: Start and Done Events

March 08, 2024

When did you last need use an animation feature in your application? It’s something you probably do on a regular basis, if not daily. With Angular, we have a powerful animation framework that we can leverage to do all sorts of crazy things. Sometimes, when using these animation features, we need to do things when the animation starts, or when it ends, or both. Well, good news for us – we have this ability in Angular.

Accessibility Angular Angular Animations

Angular Animations Tutorial: Querying and Staggering Items

March 01, 2024

I work in Angular every day and I build things that need to be animated or transitioned when interacted with. And, because of this, I’m thankful for the Animations module. There are so many useful features available that make life much easier. We’re going to look at two of these features in this post. First, we’re going to use the query() function to find and animate several items at once. Then, we’ll use the stagger() function to create a delay between the animations running on each of these items. Alright, let’s get to it!

Accessibility Angular Angular Animations

Angular Animations: Keyframe Animations

February 23, 2024

As you probably already know, when you build apps today, you’ll likely need to use animations and transitions to enhance the UI where possible. With Angular’s animation framework we have access to some pretty powerful features which allow us to do things that may not be possible with CSS alone. In this post we’re going to look at a little, fun and crazy example using the Angular keyframes() animation function. Alright, let’s get to it!

Angular Angular Animations Angular Styles

Angular Animations: Enter and Leave

February 16, 2024

When building things with Angular have you ever found yourself with the need to animate mark-up as it physically enters and leaves the DOM? This isn’t possible right? Actually, it is. In Angular we have access to a powerful animation framework. It’s packed with many features that just aren’t possible, at least at the moment, with CSS by itself. In this post we’re going to dive into one such feature, the ability to animate mark-up as it’s added and removed from the document with the :enter and :leave aliases. Alright, let’s get to it!

Angular Angular Animations Angular Components

Angular Animations: Learn the Basics

February 09, 2024

When you build stuff in Angular, you probably pretty quickly discover that you want to add animations and transitions. They are an important aspect to any application now-a-days right? They help make the overall user experience feel nicer and can help to make it more intuitive too. Many times, we can use CSS to handle these animations, but Angular has a powerful animation framework baked right in that allows us to do a lot more than what we can with plain ol’ CSS. Alright, let’s get to it!

Accessibility Angular Angular Animations

Angular CDK Overlay: Adding Accessibility Features

February 02, 2024

When creating a modal or pop-up in an Angular application, accessibility can be easy to overlook. If you’re developing an app but you’re able to see, hear, and easily access and use different devices, it’s probably not top of mind for you. But it’s important. Our goal should be to make our apps available to as many people as possible. Making them accessible helps do just that. In this post, we’ll work on an existing demo application that we’ve created over several posts focused on the Angular CDK Overlay. We’ll take the example and make it accessible using ARIA roles and attributes, managing focus, and adding proper keyboard functionality. Alright, let’s get to it!

Angular Angular CDK Angular Directives

Angular CDK Overlay: Adding Animations

January 26, 2024

When using the Angular CDK Overlay module, you will likely want to transition the opening and closing of the overlay content. It’s something that seems like it should be pretty easy and straightforward but it’s actually a little tricky. It can’t really be transitioned with CSS only because it’s markup that gets added into and removed from the document. It’s not a simple style or class change. We need to leverage Angular animations to make it work well. In this post I’ll show you why and I’ll show you how to make animations work for your overlays. Alright, let’s get to it!

Accessibility Angular Angular CDK

Angular CDK Overlay: Scroll Strategies

January 19, 2024

In the Angular CDK there are a lot of cool, exciting, and helpful features. And the Overlay Module is one of the most powerful. It’s used to create things like dialogs, tooltips, menus, custom dropdowns and more. I’ve already created a couple of posts on the Overlay Module, one where I cover the basics of setting them up, and another where I demonstrate different ways that they can be positioned within the viewport. If you’re unfamiliar with these concepts and haven’t read those, you should do that before rreading this one because we will build off the examples that we created in them. Here, we’ll be focused on how we want an overlay to react when scrolling the container it’s positioned within.

Angular Angular CDK Angular Styles

Angular CDK Overlay: How Positioning Works

January 12, 2024

The Angular CDK Overlay is a handy, powerful, and fairly complex feature that can be used to quickly create modals and pop-ups. In my previous post about the CDK Overlay, I covered the basics needed to create both a modal using the global position strategy and a pop-up using the flexible connected to position strategy. I’d suggest that if you’re unfamiliar with the Overlay module at all, you go check out that post first because the demos in this video will build off the examples we built, and concepts that we learned. In this post we are going to learn about different ways to control how a pop-up gets positioned when using a connected overlay because there’s a lot to it and it’s all pretty cool.

Angular Angular CDK Angular Forms

Angular CDK Overlay: Learn the Basics

January 05, 2024

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes this is easy and can be done with some simple CSS, but other times, it may be more complicated. You may need to append markup to the bottom of your document so that it can be placed on top of everything else. Or maybe depending on scroll position, a pop-up will need to open upward instead of downward. There’s lot’s of possible scenarios where you may need more than what’s capable with CSS by itself and that’s where the CDK Overlay Module comes into play.

Angular Angular Components Angular Forms

Use Inputs to Pass Data to Dynamically Created Angular Components

December 29, 2023

If you’re using dynamically created components in Angular, you’ve probably found it difficult to pass information between the parent and child components when needed. You need to provide the info in the parent and then inject it within the child component. While it’s not necessarily difficult to do, it results in a lot of extra boilerplate code. It would be so much better if we could just use the `@Input` decorator like we’re used to. Well, guess what? Angular supports doing this exact thing as of version sixteen. In this post, I’ll show you how. Alright, let’s get to it.

Accessibility Angular Angular CDK

Using the Angular CDK Trap Focus Directive

December 15, 2023

A focus trap is a very important accessibility feature within a web application. In this post I’ll first help you understand what it is, then why it’s important, and finally I’ll show how to quickly and easily add the concept within your Angular apps where needed. And, it’s pretty easy thanks to the Angular CDK. Alright, let’s get to it.

Angular Angular Components Angular Styles

New CSS features in Angular

December 01, 2023

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!

Angular Angular CDK Angular Components

How to Use the Angular CDK Viewport Ruler for Responsive Apps

November 17, 2023

Sometimes, in an Angular app we need to trigger something when the viewport gets resized. Like in the demo app for this post, when we open a menu, and then resize, we want to close the menu automatically. How would you do this? Well, maybe you have some ideas, but with the Angular CDK, this is pretty easy. We can use the Viewport Ruler. It’s a utility that deals with, you guessed it, the viewport. In this post I’m going to show you how to use it. Alright, let’s get to it!

Angular Angular Components Angular Directives

Angular Control Flow Basics

November 03, 2023

In the latest version of Angular, we’re getting what is known as the new Control Flow syntax for our component templates. It will replace older directives for things like *ngIf/else, ngSwitch, and *ngFor. In this post we’re going to learn exactly what this change means for us and how to use it. Alright, let’s get to it.

Angular Angular Components Angular Forms

Angular Host Binding Animations

October 20, 2023

Angular provides many ways to animate things. In this post we are going to look specifically at adding :enter and :leave animations to a component as it gets added and removed from the UI. We’re going to do this with the Angular @HostBinding decorator and the enter and leave aliases for animations. Alright, let’s check it out!

Angular Angular CDK Angular Components

How to Utilize Angular CDK Breakpoint Observer

October 05, 2023

Most of the time, when creating responsive applications in Angular, we just need to use CSS and media queries. Every once in a while though, we need to alter some interactivity or logic based on these same media queries. Meaning, we need to access them in some way from JavaScript. And this can get a little messy sometimes. Luckily for us, we can use the Breakpoint Observer utility provided by the Angular CDK. Let’s check it out!

Accessibility Angular Angular Components

4 Ways to Listen to Events in Angular

September 08, 2023

Sometimes we need to react to certain events in the browser and write code against them. Maybe we need to listen to a click, input change, focus, or blur. Maybe we need to do something like listen for a click anywhere within the document. Well, good news, we’ve got many ways to do this in Angular. In this post I’m going to show you four common ways.

Angular Angular Directives Angular Forms

4 Ways to Dynamically Add Classes in Angular

September 01, 2023

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!

Angular Angular Directives Angular Styles

Quick Tip - 15: How to Fix ng-cloak Flicker in AngularJS

April 18, 2014

The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

Angular Angular Components Angular Directives

AngularJS Overview for Web Designers

March 24, 2014

AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that you don’t want with other libraries/frameworks of your choice. It is built and maintained by Google and is open source with an MIT license.

Angular Angular Styles CSS

All You Need to Know About CSS3 Multiple Columns

January 12, 2014

Layout has traditionally been a pretty difficult thing to get right when it comes to building web sites. With CSS3, however, it looks like things are getting a bit easier. I've written "Flexbox: Modern Web Layouts Simplified" which covered Flexbox layout techniques. That was cool, but there are other great layout features provided for us in CSS3, In this article I'm covering CSS3 Multiple Columns.