Angular Components

April 17, 2025

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

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.

April 10, 2025

How Angular Components Should Communicate in 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.

April 03, 2025

The Easiest Way to Add a Modal in Angular

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!

March 27, 2025

Turn Any Angular Component Into a Powerhouse with This Trick!

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!

March 06, 2025

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

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.

February 27, 2025

How to Theme Angular Components Like a Pro

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.

February 21, 2025

Explaining Angular to My Grandma

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.

February 20, 2025

Understanding View vs. Content in Angular

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.

February 14, 2025

Components are Just Tiny Digital Apartments 😂

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!

February 06, 2025

The Beginner's Guide to Content Projection in Angular

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.

January 30, 2025

Component Selectors in Angular: Everything You Need to Know

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!