Component Communication

Switch Between Grid & List Views in Angular: Easy & Flexible

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.

You Might Not Need That Service After All 💉

You Might Not Need That Service After All 💉

May 15, 2025

Component communication in Angular often requires prop drilling with inputs/outputs or global services, creating tight coupling and maintenance headaches. Angular's dependency injection system allows you to inject parent or grandparent components directly, eliminating the need for intermediate props or shared services. This tutorial demonstrates how to use component injection to access parent component APIs, share context across component hierarchies, and simplify component communication patterns.