Angular Development Tutorials

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.

CSS CSS Shapes HTML

CSS Shapes: The Reference Box

August 20, 2024

CSS Shapes require a reference box to establish a coordinate system for drawing and positioning shapes. The reference box determines how shapes are calculated relative to the element's box model (margin, border, padding, or content box). This tutorial explains how reference boxes work, which box model values to use, and how they affect shape positioning and content flow.

CSS CSS Shapes HTML

CSS Shapes: Fundamentals

August 20, 2024

CSS Shapes solve a fundamental web layout limitation: content wrapping around custom shapes. Before CSS Shapes, floated elements always created rectangular float areas, preventing content from flowing around circles, polygons, or transparent images. This tutorial explains what CSS Shapes are, how they control content flow without rendering visual shapes, and the core concepts needed to use them effectively.

CSS CSS Shapes HTML

CSS Shapes: What are They?

August 19, 2024

CSS Shapes control how content flows around floated elements, but they don't actually render visual shapes—they define float areas. Understanding this distinction is crucial: CSS Shapes determine where content wraps, not what shapes appear on the page. This tutorial explains what CSS Shapes are, how they differ from visual CSS shapes created with borders or clip-path, and why floated elements still create rectangular float areas without the CSS Shapes module.

CSS CSS Shapes HTML

CSS Shapes: Introduction

August 19, 2024

Web layouts have been trapped in rectangular boxes for decades, limiting designers to grid-based structures that can't match the creative freedom of print design. CSS Shapes changes everything by allowing content to flow around custom shapes, creating magazine-style layouts with text wrapping around circles, polygons, and custom paths. This comprehensive guide teaches you how to break free from rectangular constraints and build sophisticated, editorial-style layouts that were previously impossible on the web.

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.

Angular Angular Effects Angular Signals

Angular effect(): React to Signal Changes with Side Effects (v19+)

August 01, 2024

Reacting to signal changes for side effects like logging, API calls, or DOM manipulation requires a different approach than computed signals, which are read-only and template-focused. Angular's effect() function executes code when signals change, making it perfect for debugging, analytics, and imperative operations that can't be handled in templates. This tutorial demonstrates when and how to use effect() effectively, while also covering when NOT to use it (see the linked tutorial for common mistakes).

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.

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.