Content Projection

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