This website is Brian Treese's Angular Development Blog. The site provides practical, hands-on tutorials and resources for developers who use the Angular framework. The tutorials cover modern Angular techniques including Signals, Components, Forms, Animations, CDK (Component Dev Kit), and Styling. Each tutorial includes code examples, video demonstrations, and step-by-step instructions to help you build Angular applications.
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 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.
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.
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.
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).
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.
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'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.
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'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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.