CSS Custom Properties

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 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 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 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.