Angular Development Tutorials

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.

Accessibility Angular Angular Components

Angular @let Template Variables: Create Variables in Templates (v17+)

July 19, 2024

Angular's @let syntax allows you to create variables directly in templates, eliminating the need for component properties for simple calculations and transformations. Template variables improve readability, reduce component complexity, and enable inline computations without cluttering your TypeScript code. This tutorial demonstrates how to use @let for string manipulation, computed values, conditional logic, and accessibility improvements, showing real-world examples that simplify your templates.

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 Animations

Angular Router Transitions: Animate Route Changes (Deprecated Module)

June 14, 2024

Adding smooth transitions between routes makes Angular applications feel polished and professional. While this tutorial demonstrates route animations using Angular's deprecated animations module, modern Angular (v19+) offers better alternatives using CSS animations and DOM events. This guide shows you how route transitions work with the legacy module, but for production apps, consider using pure CSS animations or Angular's new enter/leave animation API instead.

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.

Accessibility Angular Angular Animations

Angular Animations: Disable/Enable Animations (Deprecated Module)

May 19, 2024

Unwanted animations on component initialization create jarring user experiences and performance issues. Sometimes animations should only run on user interactions or data changes, not when components first render. Angular provides mechanisms to disable animations globally, per component, or conditionally based on application state. This tutorial shows you how to control when animations run, disable them for accessibility preferences, and prevent initialization animations. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Create Reusable Animation Functions (Deprecated Module)

May 11, 2024

Duplicating animations across components creates maintenance nightmares and inconsistent user experiences. As Angular applications grow, you need to extract reusable animation functions that can be shared across components. This tutorial shows you how to create reusable animation functions, organize them in shared files, and apply them consistently throughout your application. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Animations

Angular Animations: Add Flexibility with Animation Params (Deprecated Module)

May 04, 2024

Static animations limit component reusability, forcing you to create separate animations for slight variations. Angular's animation params allow you to pass dynamic values to animations, creating flexible, configurable effects that adapt to different use cases. This tutorial demonstrates how to use animation params to create reusable animations that change direction, duration, or style based on component state. Note: This uses Angular's deprecated animations module—for modern approaches, see the linked tutorials.

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: Animate Multiple Items in Parallel (Deprecated Module)

March 15, 2024

Angular animations run sequentially by default, which works for simple transitions but breaks complex animations where multiple properties need to change simultaneously. Parallel animations are essential for coordinated effects like simultaneous fade and slide transitions, or when animating multiple elements together. This tutorial shows you how to run multiple animations in parallel using Angular's animation API, creating more sophisticated and professional effects. Note: This uses Angular's deprecated animations module.