Angular Styles

Make Any List Draggable in Minutes

October 09, 2025

Drag-to-reorder functionality improves UX by letting users customize list order, but implementing it requires handling drag events, calculating drop positions, and managing list state. The Angular CDK Drag and Drop module simplifies this with directives that handle all drag complexity, including visual feedback, drop zones, and reordering logic. This tutorial demonstrates how to add drag-to-reorder functionality to any Angular list using the CDK Drag and Drop module, requiring minimal code and no external libraries.

Angular Angular Animations Angular Components

Modern Angular Animations: Ditch the DSL, Keep the Power

September 04, 2025

Angular's deprecated animations module leaves developers wondering how to create advanced animations without the DSL. The modern approach combines Angular's new enter/leave animation primitives with pure CSS animations, providing better performance, hardware acceleration, and simpler code. This tutorial demonstrates how to build complex animations including staggered list animations, sequential effects, and coordinated multi-element transitions using modern Angular animation techniques.

Angular Angular Components Angular Signals

I Built the Smoothest Countdown Timer in Angular

August 14, 2025

Session timeout warnings prevent users from losing unsaved work by providing clear countdown feedback before automatic logout. Building effective session timers requires real-time countdown logic, visual feedback with animations, and color-coded warnings that escalate as time runs out. This tutorial demonstrates how to build a session timer component in Angular with smooth animations, progressive visual warnings, and clear messaging that keeps users informed.

Angular Angular Components Angular Signals

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

August 07, 2025

Grid/list view toggles improve UX by letting users choose their preferred content layout, but building flexible toggle components requires managing state, coordinating CSS classes or component trees, and handling both internal and external state management. This tutorial demonstrates how to build a reusable view mode toggle component in Angular that can switch between CSS classes or completely different component structures, supporting both self-contained and parent-controlled state patterns.

Angular Angular Animations Angular Components

Angular Enter/Leave Animations in 2025: Old vs New

July 31, 2025

Angular's deprecated animations module is being replaced by a new enter/leave animation API that's lighter, hardware-accelerated, and simpler than the old DSL-based system. This tutorial demonstrates how to migrate from the legacy :enter and :leave animations to Angular's new animation primitives, showing how to create smooth enter/leave transitions using modern CSS animations and Angular's new animation helpers. You'll learn how to build professional animations without the deprecated module.

Angular Angular Animations Angular Components

Build the Perfect “Show More” Component in Angular

July 24, 2025

Expandable content components are essential for long-form content, but implementing smooth height transitions requires handling dynamic content heights, coordinating CSS animations, and managing state. This tutorial demonstrates how to build a professional "show more" component in Angular with smooth height transitions, fade effects, and proper state management. You'll learn how to measure content height dynamically, create elegant expand/collapse animations, and handle edge cases like nested content and responsive layouts.

Angular Angular Components Angular Directives

One Slot? Two Slots? Conditional Slots? Solved.

July 10, 2025

Multi-slot content projection in Angular enables flexible component APIs, but managing multiple slots, conditional projection, and fallback content requires understanding Angular's content projection system. This tutorial demonstrates how to create components with multiple named slots, handle conditional content projection, provide fallback content when slots are empty, and conditionally render the same slot in different locations based on component state.

Angular Angular Animations Angular Components

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

June 26, 2025

Modernizing legacy Angular applications requires replacing deprecated decorators with modern APIs, but knowing what to update and how can be overwhelming. This tutorial demonstrates step-by-step modernization using Angular's latest features: host element bindings replacing @HostBinding and @HostListener, control flow syntax replacing structural directives, and signal inputs replacing @Input decorators. You'll learn how to modernize an existing application, reducing code size and improving performance while maintaining functionality.

Angular Angular Components Angular Signals

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

June 05, 2025

Double-submit buttons create poor user experiences and can cause duplicate API calls, form submissions, or unintended actions. Cooldown buttons prevent this by disabling themselves after clicks, showing countdown timers, and preventing rapid-fire interactions. This tutorial demonstrates how to build a reusable cooldown button component in Angular using signals for state management and setInterval for countdown functionality, creating a pattern you can use throughout your application.

Angular Angular Components Angular Directives

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

May 29, 2025

One-time UI elements like onboarding banners and tooltips need to remember their dismissed state across page reloads, but managing this with component state loses persistence. LocalStorage provides persistent storage that survives browser sessions, while Angular signals enable reactive state management. This tutorial demonstrates how to build a reusable structural directive that combines localStorage persistence with signal-based reactivity, creating a one-time UI pattern you can use anywhere in your Angular application.

Angular Angular Components Angular Directives

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

May 22, 2025

Directives with public methods or signals need a way to expose their API to parent components, but accessing directive instances from templates requires explicit references. Angular's exportAs property lets you create template references to directives, enabling access to their methods, signals, and properties directly in templates. This tutorial demonstrates how to use exportAs to create reusable directives with clean, declarative APIs, following patterns used by Angular Material components.

Angular Angular Components Angular Inject

You Might Not Need That Service After All 💉

May 15, 2025

Component communication in Angular often requires prop drilling with inputs/outputs or global services, creating tight coupling and maintenance headaches. Angular's dependency injection system allows you to inject parent or grandparent components directly, eliminating the need for intermediate props or shared services. This tutorial demonstrates how to use component injection to access parent component APIs, share context across component hierarchies, and simplify component communication patterns.

Angular Angular Animations Angular Components

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

May 08, 2025

Blank screens and generic spinners create poor user experiences, making apps feel slow even when they're loading quickly. Skeleton loaders improve perceived performance by showing UI structure immediately, providing visual feedback, and creating smooth transitions to real content. This tutorial demonstrates how to build skeleton loaders using Angular's deferred loading, signals for state management, and animations for smooth transitions. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Angular Form Control

Still Using ControlValueAccessor? It Might Be Overkill 🤷

May 01, 2025

ControlValueAccessor requires multiple interface methods, providers, and boilerplate code, making simple custom form controls unnecessarily complex. Modern Angular provides simpler alternatives using signal inputs and direct FormControl bindings, eliminating the need for ControlValueAccessor in many cases. This tutorial demonstrates how to build custom form controls without ControlValueAccessor, reducing code complexity while maintaining full form integration and validation support.

Angular Angular CDK Angular Components

Toast Notifications in Angular? Easier Than You Think!

April 24, 2025

Toast notifications provide user feedback for actions, errors, and system messages, but building them from scratch requires overlay management, positioning, and animation coordination. Angular Material's Snackbar service handles all of this complexity, providing a simple API for displaying toast notifications with actions, custom durations, and styling. This tutorial demonstrates how to implement toast notifications using Angular Material, including advanced patterns like triggering overlays from snackbar actions.

Angular Angular CDK Angular Components

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

April 17, 2025

Resizable sidebars improve UX by letting users customize layouts, but implementing drag-to-resize functionality requires handling mouse events, calculating dimensions, and managing state. The Angular CDK Drag and Drop module simplifies this by providing built-in drag handling, boundary detection, and state management. This tutorial demonstrates how to build a resizable sidebar using only the Angular CDK, creating a professional drag-to-resize experience without external libraries.

Angular Angular Components Angular Input

How Angular Components Should Communicate in 2025

April 10, 2025

Component communication in Angular has evolved from traditional inputs/outputs to modern two-way binding with model inputs, reducing boilerplate and simplifying parent-child data flow. This tutorial demonstrates three component communication patterns: one-way data flow with inputs/outputs, two-way binding with model inputs, and when to use each approach. You'll learn how to implement real-time communication between parent and child components using modern Angular patterns.

Angular Angular CDK Angular Components

The Easiest Way to Add a Modal in Angular

April 03, 2025

Building modals in Angular often requires third-party libraries or complex overlay code, but the Angular CDK Dialog provides a native, lightweight solution that handles positioning, focus management, and backdrop behavior automatically. This tutorial demonstrates how to create modals using the CDK Dialog service, open any component as a modal, customize styling, and add custom behavior without external dependencies. You'll learn the simplest way to add professional modals to your Angular applications.

Accessibility Angular Angular Components

Angular Directive Composition API: Enhance Components with Host Directives (v19+)

March 27, 2025

Applying multiple directives to components creates verbose templates and makes it easy to forget required directives. Angular's Directive Composition API lets you embed directives directly into components, creating reusable component behaviors that can't be accidentally omitted. This tutorial demonstrates how to use host directives to add functionality like auto-focus, click-outside detection, and accessibility features directly into components, reducing template complexity and improving maintainability.

Angular Angular Components Angular Form Control

Angular Reactive Forms: Build Dynamic Checkbox Lists

March 20, 2025

Dynamic checkbox lists are common in Angular forms, but building them with proper state management and "Select All" functionality requires understanding Reactive Forms patterns. This tutorial shows you how to generate checkbox controls dynamically from data, track selected values reactively, and implement a master "Select All" checkbox that toggles all items at once. You'll learn how to handle form state, validation, and user interactions efficiently.

Accessibility Angular Angular Components

Angular Page Titles: 3 Ways to Set Dynamic Titles

March 13, 2025

Static page titles hurt SEO rankings, confuse users with multiple tabs open, and violate accessibility guidelines. Angular provides multiple ways to set dynamic page titles, from simple route-based titles to complex dynamic titles that change based on component data. This tutorial demonstrates three approaches: using the Title service in components, setting titles in route configuration, and handling dynamic titles with route resolvers. You'll learn how to ensure every page has a unique, descriptive title.

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

Angular Component Styling: Every Way to Add Styles (Complete Guide)

March 06, 2025

Angular offers multiple ways to add styles to components, each with different use cases and trade-offs. From inline styles in the decorator to external stylesheets, from programmatic styling with Renderer2 to CSS custom properties, choosing the right approach impacts maintainability and performance. This comprehensive guide walks through every styling method available in Angular, helping you make informed decisions for your components.

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

Angular Component Theming: CSS Custom Properties and :host-context

February 27, 2025

Component theming in Angular requires understanding how styles cascade and how to adapt components to different contexts. This tutorial demonstrates multiple theming strategies using CSS :host and :host-context selectors, along with CSS custom properties. You'll learn how to create flexible components that adapt their appearance based on where they're used, whether in a sidebar, main content area, or different color schemes. Each approach has trade-offs that we'll explore in detail.

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

Dynamic class and style bindings in Angular templates often become complex, mixing string concatenation, ternary operators, and multiple bindings that are hard to read and maintain. Angular's template literal syntax provides a cleaner way to handle dynamic expressions, allowing you to use JavaScript template literals directly in templates for classes, styles, and complex interpolations. This tutorial demonstrates how to use template literals to simplify dynamic bindings and improve template readability.

Angular Angular Components Angular Styles

Angular Content Projection: Complete Guide to ng-content and Slots

February 06, 2025

Content projection is one of Angular's most powerful features for building flexible, reusable components. Instead of hardcoding content inside components, you can create "slots" where parent components inject their own content. This tutorial covers everything from basic single-slot projection to advanced multi-slot patterns and fallback content. You'll learn how to build components that adapt to different use cases without duplicating code.

Angular Angular Components Angular Styles

Angular Component Selectors: Complete Guide to Element, Attribute, and Class Selectors

January 30, 2025

Choosing the wrong component selector in Angular creates maintenance issues, breaks encapsulation, and limits component flexibility. Angular supports three selector types—element, attribute, and class—each with different use cases and trade-offs. This tutorial demonstrates all component selector options in Angular, helping you choose the right selector for your component based on reusability, styling needs, and integration requirements.

Angular Angular Components Angular Forms

Angular :host and :host-context: Style Component Host Elements

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

Angular ::ng-deep Alternatives Part 2: CSS Custom Properties and View Encapsulation

January 16, 2025

Replacing ::ng-deep requires understanding CSS Custom Properties, View Encapsulation modes, and component architecture patterns. This follow-up tutorial addresses common misconceptions about avoiding ::ng-deep and provides specific, production-ready examples using CSS Custom Properties and View Encapsulation settings. You'll learn why ::ng-deep is discouraged by the Angular team and practical alternatives that maintain component boundaries while allowing necessary style customization.

Angular Angular Components Angular Forms

Angular SVG Components: Create Dynamic Interactive Graphics

January 09, 2025

SVG components in Angular unlock powerful possibilities for data visualization and interactive graphics. Unlike static images, SVG components can respond to data changes, user interactions, and state updates in real time. This tutorial shows you how to transform basic lists into dynamic, interactive SVG charts using Angular's component system, signal-based reactivity, and template binding. You'll learn how to create scalable, data-driven visualizations that update automatically.

Angular Angular Animations Angular Components

Angular Deferred Loading with Animations: Performance and UX (v19+)

January 02, 2025

Loading content users never see wastes bandwidth and slows initial page loads, hurting performance metrics and user experience. Angular's deferred loading feature lets you load components only when they're needed, reducing initial bundle size and improving Core Web Vitals. This tutorial demonstrates how to combine deferred loading with animations, creating smooth transitions as components enter the viewport. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Angular Form Control

Angular Form Validation: Complete Guide to Validators and Error Handling

December 27, 2024

Form validation is crucial for creating great user experiences in Angular applications. Without proper validation, users struggle with unclear errors, incomplete submissions, and frustrating experiences. This tutorial shows you how to implement comprehensive form validation using Angular Reactive Forms, including required fields, email validation, and real-time error messages. You'll learn how to display helpful feedback and prevent invalid submissions.

Angular Angular Components Angular Styles

Angular ::ng-deep Alternatives: Modern Styling Approaches

December 20, 2024

The deprecated ::ng-deep selector was Angular's way to break style encapsulation, but it causes maintenance issues, breaks encapsulation principles, and is no longer supported. Modern Angular provides better alternatives using CSS Custom Properties and View Encapsulation settings that maintain component boundaries while allowing necessary style overrides. This tutorial shows you how to replace ::ng-deep with maintainable, future-proof styling approaches that work with Angular's component architecture.

Angular Angular Animations Angular Forms

Angular Expand/Collapse Animation: Animate Height Changes (Deprecated Module)

December 13, 2024

Expand and collapse animations make Angular UIs feel polished and professional. This tutorial demonstrates how to animate height changes using Angular's deprecated animations module. While this approach still works, modern Angular (v19+) offers better alternatives using CSS animations and DOM events. You'll learn the legacy approach here, but for new projects, consider using pure CSS transitions or Angular's new enter/leave animation API.

Angular Angular Components Angular Forms

Angular Signals: set() vs update() - When to Use Each

December 06, 2024

Choosing between set() and update() for writable signals in Angular seems trivial, but the wrong choice leads to verbose code, unnecessary complexity, or missed optimization opportunities. set() replaces the entire signal value, while update() transforms the current value using a callback function. This tutorial explains when each method is appropriate, demonstrates real-world examples, and shows how to write cleaner, more efficient signal update code.

Angular Angular Effects Angular Signals

Angular linkedSignal(): Advanced Features and Multiple Sources (v19+)

November 29, 2024

Angular's linkedSignal() goes beyond simple two-way binding with advanced features that enable intelligent update logic. By comparing old and new values, you can create conditional updates, prevent unnecessary changes, and implement complex state synchronization patterns. This tutorial explores advanced linkedSignal() features including value comparison callbacks, multiple source signals, and smart update strategies that optimize performance and reduce unnecessary re-renders.

Angular Angular Components Angular ContentChild

Angular Signal Queries: Replace @ContentChild with contentChild() (v19+)

November 22, 2024

Content projection in Angular requires querying projected content, but the old @ContentChild and @ContentChildren decorators have limitations: they're not reactive, require lifecycle hooks, and don't integrate well with signals. The new contentChild() and contentChildren() signal queries solve these problems by providing automatic reactivity, better type safety, and seamless signal integration. This tutorial shows you how to migrate from decorator-based content queries to the modern signal query API.

Angular Angular Effects Angular Forms

Angular linkedSignal(): Create Writable Signals from Other Signals (v19+)

November 15, 2024

Angular 19 introduces linkedSignal(), a powerful new primitive for creating writable signals that automatically sync with other signals. Unlike computed signals which are read-only, or effects which cause side effects, linked signals provide a clean way to create two-way reactive bindings. This tutorial demonstrates how to use linkedSignal() to simplify form state management, create reactive UI components, and avoid common anti-patterns with effects.

Accessibility Angular Angular Components

Angular Signal Queries: Replace @ViewChild with viewChild() (v19+)

November 08, 2024

Angular's @ViewChild and @ViewChildren decorators are being replaced by signal-based query functions that offer better type safety, automatic reactivity, and cleaner code. The new viewChild() and viewChildren() functions eliminate the need for lifecycle hooks, provide reactive updates, and integrate seamlessly with Angular's signal system. This tutorial walks through converting existing decorator-based queries to the modern signal query API, showing real-world examples and migration patterns.

Angular Angular Components Angular Effects

Angular effect(): When NOT to Use It and Better Alternatives

November 01, 2024

Angular's effect() function is often misused, leading to performance issues, unnecessary side effects, and code that's harder to reason about. While effects seem like an easy solution for reacting to signal changes, most scenarios have better alternatives using computed signals, template bindings, or lifecycle hooks. This tutorial shows you when NOT to use effects, demonstrates common anti-patterns, and provides better solutions for each scenario. You'll learn to write more efficient, maintainable Angular code.

AI Code Editor AI Coding Assistant Accessibility

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

October 18, 2024

AI-powered code editors are transforming how developers work, and Cursor is leading the charge. Built on VS Code, Cursor brings intelligent code suggestions, automated error detection, and powerful AI assistance directly into your Angular workflow. In this tutorial, I'll show you real examples of how I use Cursor in my Angular projects, from refactoring components to generating tests. You'll see why it's become essential to my development process.

Accessibility Angular Angular Components

Angular Currency Pipe: Complete Guide to Currency Formatting

October 11, 2024

Currency formatting mistakes break user trust and create confusion in international applications. Displaying prices incorrectly—wrong decimal places, missing currency symbols, or incorrect locale formatting—makes your app look unprofessional and can lead to user errors. Angular's Currency Pipe handles all these complexities automatically, supporting 150+ locales, proper decimal formatting, and accessibility requirements. This tutorial shows you how to format currency correctly for any locale and use case.

Angular Angular Components Angular Pipe

Angular Date Pipe: Complete Guide to Date Formatting

October 04, 2024

Date formatting in Angular applications often causes headaches: inconsistent formats confuse users, locale-specific requirements complicate code, and manual formatting leads to maintenance nightmares. Angular's Date Pipe solves these problems by providing built-in localization, flexible formatting options, and semantic HTML support. This complete guide covers everything from basic date formatting to advanced locale handling, timezone management, and SEO-friendly date markup.

Angular Angular Components Angular Form Control

Angular Reactive Forms: Create and Enhance Form Controls

September 13, 2024

Building forms in Angular requires understanding Reactive Forms, but many developers struggle with creating form controls, tracking validation states, and providing user feedback. This tutorial shows you how to create form controls using Angular's Reactive Forms Module, track validity and interaction states, and enhance forms with visual feedback based on user input. You'll learn the fundamentals needed to build production-ready forms that guide users through the submission process.

Accessibility Angular Angular Components

Angular Content Toggle: Show/Hide Content with Buttons

September 06, 2024

Building toggle buttons in Angular doesn't have to be complicated. Whether you need to show/hide content with CSS classes or conditionally render elements, this tutorial covers multiple approaches. You'll learn how to create reusable toggle buttons that control content visibility, handle state management with signals, and implement smooth transitions. By the end, you'll have several patterns you can use in any Angular project.

Angular Angular Animations Angular Components

Angular Crossfade Animation: Fade Between Content (Deprecated Module)

August 30, 2024

Crossfade animations create smooth transitions between content changes, image carousels, and tab switches, eliminating jarring instant replacements. While CSS transitions can handle simple fades, coordinating simultaneous fade-out and fade-in effects requires careful timing and state management. This tutorial demonstrates how to create crossfade animations using Angular's animation framework, ensuring smooth transitions between content states. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Flip Animation: Create Card Flip Effects (Deprecated Module)

August 23, 2024

Flip animations create engaging card interactions, reveal effects, and 3D transformations that feel natural and intuitive. Implementing flip animations requires careful coordination of transforms, perspective, and timing to create convincing 3D effects. This tutorial demonstrates how to create flip animations using Angular's animation framework, including proper perspective setup and smooth transitions. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Slide Animation: Slide-in/Slide-out Effects (Deprecated Module)

August 16, 2024

Slide-in and slide-out animations are essential for modals, sidebars, and dynamic content, creating smooth transitions that guide user attention. While CSS transitions work for simple show/hide scenarios, Angular's animation framework provides better control over timing, easing, and coordination with component lifecycle. This tutorial demonstrates how to create professional slide animations using Angular's animation framework. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Components

Angular computed(): Create Derived Signals from Other Signals (v19+)

August 01, 2024

Derived state is common in Angular applications—calculating totals from item prices, formatting dates from timestamps, or combining multiple signals into a single computed value. Angular's computed() function creates reactive, memoized signals that automatically update when their dependencies change, eliminating the need for manual subscriptions and improving performance. This tutorial demonstrates how to use computed() to create derived signals that stay in sync with their sources.

Angular Angular Components Angular Styles

3 Ways to Add Dynamic CSS Custom Properties in Angular

July 25, 2024

Dynamic CSS custom properties enable data-driven styling in Angular components, allowing you to create responsive charts, themed components, and dynamic layouts based on runtime values. Angular provides multiple ways to set custom properties programmatically, each with different use cases and trade-offs. This tutorial compares three approaches: template style binding, Renderer2's setStyle method, and host element binding, helping you choose the right method for your scenario.

Angular Angular Animations Angular Components

Angular Custom Loading Screen: Replace Blank Bootstrap Screen

July 05, 2024

Blank screens during Angular app bootstrap create poor first impressions and make applications feel slow, even when they're loading quickly. Custom loading screens improve perceived performance, provide visual feedback, and enhance brand consistency. This tutorial shows you how to replace Angular's default blank bootstrap screen with a custom loading animation that displays while your app initializes. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Angular Directives

Angular Host Element Binding: Replace @HostBinding and @HostListener (v19+)

July 05, 2024

Angular's @HostBinding and @HostListener decorators are deprecated, existing only for backwards compatibility. Modern Angular uses host element bindings in the component decorator and host event bindings in templates, providing better type safety, clearer syntax, and improved performance. This tutorial demonstrates how to migrate from deprecated decorators to modern host binding patterns, updating real-world examples and modernizing component code along the way.

Angular Angular CDK Angular Components

Angular CDK Auto-Resizing Textareas: Dynamic Height Control

June 28, 2024

Fixed-height textareas create poor user experiences when content exceeds the visible area, forcing users to scroll within a small box. Auto-resizing textareas improve UX by expanding to fit content, eliminating scrollbars, and providing visual feedback as users type. The Angular CDK TextField module includes a directive that handles all the complexity of auto-resizing textareas, including proper height calculations and performance optimizations. This tutorial shows you how to implement auto-resizing textareas in minutes.

Accessibility Angular Angular CDK

Angular CDK Accordion: Build Expandable Sections Easily

June 21, 2024

Accordion components organize content into collapsible sections, but building them from scratch requires managing state, keyboard navigation, ARIA attributes, and accessibility features. The Angular CDK Accordion module provides all of this out of the box, making it easy to create accessible, keyboard-friendly accordions. This tutorial shows you how to use the CDK Accordion module to build expandable content sections with proper ARIA support and keyboard navigation.

Accessibility Angular Angular Components

Angular Router Link Accessibility: Make Navigation Accessible

June 08, 2024

Inaccessible navigation links exclude screen reader users and violate WCAG guidelines, yet many Angular developers overlook basic accessibility features in router links. Angular's RouterLink directive provides built-in accessibility features including ARIA attributes, active state management, and keyboard navigation support. This tutorial demonstrates how to make breadcrumb navigation accessible using RouterLink's built-in features, ensuring all users can navigate your application effectively.

Angular Angular CDK Angular Components

Angular CDK Copy to Clipboard: Easy Text Copying

June 01, 2024

Copying text to the clipboard in Angular applications requires handling browser APIs, permission checks, and error scenarios. The Angular CDK's Clipboard module simplifies this with a directive that handles all the complexity, including cross-browser compatibility and user feedback. This tutorial shows you how to add one-click copy functionality to any element using the CDK Clipboard directive, handle success and error states, and provide user feedback.

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.

Angular Angular Components Angular Styles

Angular Native Fallback Content: Default Slots for ng-content (v18+)

April 26, 2024

Fallback content for projected slots in Angular components has required workarounds for years, making components less flexible and harder to use. Angular 18+ introduces native fallback content support for ng-content, allowing you to define default content that displays when no content is projected. This eliminates the need for conditional logic and wrapper components. This tutorial demonstrates how to use native fallback content to create more flexible, user-friendly components.

Angular Angular Components Angular Directives

Angular Signal Queries: Replace @ViewChild and @ContentChild the Modern Way (v19+)

April 20, 2024

Angular's traditional @ViewChild and @ContentChild decorators worked well for years, but in the signals era, they now have modern signal-based replacements. In this tutorial, you'll learn how to use signal queries to replace decorator-based queries with reactive, automatically updating references. We'll walk through both viewChild() and contentChild() in Angular v19+, explain how they behave differently from the old APIs, and show real-world examples for accessing template refs and projected content the modern way.

Accessibility Angular Angular Components

Angular Host Attribute Token: Replace Static Inputs with inject() (v18+)

April 13, 2024

Static string inputs that never change create unnecessary overhead in Angular components, triggering change detection and adding complexity. Angular's HostAttributeToken provides a more efficient way to handle static values by reading them directly from HTML attributes, eliminating the need for inputs and improving performance. This tutorial demonstrates how to replace static signal inputs with HostAttributeToken and the inject() function, showing when and why to use this optimization.

Angular Angular Animations Angular CDK

Angular toSignal(): Convert Observables to Signals (v19+)

April 07, 2024

Converting Observables to signals in Angular eliminates the need for async pipes, simplifies change detection, and reduces template complexity. While Observables excel at event streams and async operations, signals provide better performance for UI state that needs to update reactively. Angular's toSignal() function bridges these worlds, letting you transform Observable streams into reactive signals. This tutorial shows you how to convert common Observable patterns to signals, when to use each approach, and how to optimize performance.

Accessibility Angular Angular Animations

Angular Animations: Animate to Unknown Height (Deprecated Module)

March 29, 2024

Animating to an unknown height is impossible with pure CSS—you can't transition to auto or 100%, and max-height workarounds require arbitrary values that break in edge cases. Angular's animation framework solves this by calculating the actual height at runtime and animating to that value, creating smooth expand/collapse effects for accordions, dropdowns, and dynamic content. This tutorial demonstrates how to animate elements to their natural height, regardless of content size. Note: This uses Angular's deprecated animations module.

Angular Angular Components Angular Signals

Angular Signal Inputs & output(): The Modern @Input and @Output Replacement (v19+)

March 24, 2024

Angular's traditional @Input() and @Output() decorators have been core to component communication for over a decade, but with signals, there's now a more reactive, type-safe, and declarative alternative. In this tutorial, you'll learn how signal inputs and the output() function replace decorator-based inputs and event emitters in Angular v19+. We'll walk step-by-step through converting a classic input/output component to the modern signal-based approach and explain when, and when not, you should migrate.

Accessibility Angular Angular Animations

Angular Animations: Keyframe Animations (Deprecated Module)

February 23, 2024

Complex multi-step animations require precise control over intermediate states, something CSS keyframes can handle but Angular's keyframes() function makes easier to coordinate with component state and lifecycle. Angular's keyframes function integrates seamlessly with the animation framework, allowing you to create sophisticated sequences that respond to component data and user interactions. This tutorial demonstrates how to use keyframes() to create complex animation sequences. Note: This uses Angular's deprecated animations module.

Angular Angular Animations Angular Styles

Angular Animations: Enter and Leave Transitions (Deprecated Module)

February 16, 2024

Animating elements as they enter and leave the DOM is impossible with pure CSS, but Angular's animation framework provides :enter and :leave transitions that handle this automatically. These transitions create smooth fade-ins, slide-ins, and scale effects when items are added or removed from lists, modals, and dynamic content. This tutorial demonstrates how to use :enter and :leave aliases to create professional enter/leave animations. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Animations: Learn the Basics (Deprecated Module)

February 09, 2024

Animations transform static Angular UIs into engaging, intuitive experiences, but CSS alone can't handle complex scenarios like animating elements as they enter/leave the DOM or coordinating multiple animations. Angular's animation framework provides powerful features beyond CSS, including state-based animations, enter/leave transitions, and programmatic control. This tutorial covers the basics of Angular animations, from enabling the module to creating your first state-based animation. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular CDK Angular Directives

Angular CDK Overlay Animations: Animate Open and Close Transitions (v19+)

January 26, 2024

Adding smooth open and close animations to Angular CDK Overlays requires Angular's animation framework. CSS transitions alone won't work because overlays are dynamically inserted and removed from the DOM. In this tutorial, you'll learn why :enter/:leave animations fail for overlays, how to use state-based animations instead, coordinate animation completion with overlay detachment, and leverage transform-origin for more natural animations. This guide builds on CDK Overlay basics, positioning, and scroll strategies. All examples work with Angular v19+.

Angular Angular CDK Angular Styles

Angular CDK Overlay Positioning: Custom Positions, Fallbacks, and Viewport Handling (v19+)

January 12, 2024

Mastering Angular CDK Overlay positioning is essential for building professional dropdowns, tooltips, and popovers, but the connected overlay's positioning system can be overwhelming at first. In this guide, you'll learn how to create custom position strategies with fallback options, handle viewport edge cases, and ensure your overlays always display correctly regardless of screen size or scroll position. This article builds on the CDK Overlay basics and shows production-ready techniques for controlling overlay placement in Angular v19+. If you've ever struggled with overlays getting cut off or appearing in the wrong location, this guide will give you the tools to fix it.

Angular Angular CDK Angular Forms

Angular CDK Overlay: Build Floating Panels the Right Way (v19+)

January 05, 2024

Angular's CDK Overlay is the foundation behind dialogs, tooltips, dropdowns, and floating panels, but most developers only interact with it indirectly through Angular Material. In this guide, you'll learn how to use the Angular CDK Overlay directly to create fully custom floating UI elements with precise positioning, layering, and lifecycle control. This article is updated for Angular v19+ and shows the modern, production-ready way to create overlays without relying on deprecated patterns. If you've ever needed a custom popup, context menu, or floating panel, this is the missing piece.

Angular Angular Components Angular Styles

New CSS Features in Angular 17: Component Style Improvements

December 01, 2023

Angular 17 introduced simplified component styling options that reduce boilerplate and improve developer experience. Instead of requiring arrays for inline styles, you can now use single strings, and external stylesheet imports are more flexible. This tutorial demonstrates Angular 17's new styling features, showing how they simplify component style definitions and improve code readability.

Angular Angular CDK Angular Components

Angular CDK Viewport Ruler: Monitor Resize Events and Get Viewport Dimensions

November 17, 2023

When you need to react to viewport resize events or get viewport dimensions programmatically, the Angular CDK Viewport Ruler is the tool you need. This utility provides a clean, Angular-friendly way to monitor window resize events, get viewport size and scroll position, and handle responsive behavior that goes beyond CSS media queries. In this guide, you'll learn how to use the Viewport Ruler to close modals on resize, sync component state with viewport changes, and access viewport dimensions in your TypeScript code. All examples work with Angular v19+ and standalone components.

Angular Angular Components Angular Forms

Angular Host Binding Animations: Animate Components on Enter/Leave (v19+)

October 20, 2023

Animating components as they enter and leave the DOM is a common requirement, but CSS alone can't handle this. Angular's animation framework provides :enter and :leave transitions that work perfectly for this scenario. In this tutorial, you'll learn how to use @HostBinding to automatically animate components when they're added or removed, handle animation callbacks with @HostListener, and create reusable animated components that work anywhere in your app. All examples work with Angular v19+ and modern component patterns.

Angular Angular CDK Angular Components

Angular CDK Breakpoint Observer: Monitor Media Queries Programmatically

October 05, 2023

When CSS media queries aren't enough, when you need to change component logic, toggle functionality, or conditionally render based on viewport size, the Angular CDK Breakpoint Observer is your solution. This utility lets you monitor media queries programmatically and react to breakpoint changes in your TypeScript code. In this tutorial, you'll learn how to use the Breakpoint Observer to sync JavaScript behavior with CSS breakpoints, share breakpoint values between CSS and TypeScript, and leverage Material Design's predefined breakpoints. All examples work with Angular v19+ and standalone components.

Accessibility Angular Angular Components

Angular Event Listening: 4 Ways to Handle Events (Legacy Patterns)

September 08, 2023

Event handling in Angular requires choosing the right approach for each scenario: template event bindings for simple interactions, Renderer2 for global events, host event bindings for component-level events, and output() for component communication. This tutorial demonstrates four common event listening patterns in Angular, showing when to use each approach and how to avoid common pitfalls. You'll learn how to handle clicks, input changes, focus events, and global document events effectively.

Angular Angular Directives Angular Forms

4 Angular Class Binding Patterns You Should Actually Be Using

September 01, 2023

Conditionally adding CSS classes is one of the most common tasks in Angular, and also one of the most misunderstood. Between [class], [class.someClass], ngClass, and now modern signal-driven patterns, it's easy to end up with unreadable templates or brittle styling logic. In this article, you'll learn the four class binding patterns you should actually be using in Angular in 2025, when to use each one, and how to avoid the most common performance and readability pitfalls. All examples work with Angular v19+ and modern component patterns.

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.