Project 2 — Dashboard

1. Learning Objectives

In this project guide, you will build a performant, multi-component admin dashboard in Angular. By the end of this project, you will be able to:

• Decompose complex layouts into independent Standalone Components (Sidebar, Header, Cards).
• Share layout parameters across components utilizing Angular Signals.
• Optimize rendering loops using ChangeDetectionStrategy.OnPush.
• Display statistical layouts dynamically using CSS grids inside templates.
• Coordinate viewport changes cleanly across devices using media queries.

2. What We Are Building & Design System

We are building an admin panel. The application features:

• Sidebar Component: A sidebar containing navigation links. The sidebar supports a collapse mode, folding from 240px to 70px.
• Header Component: Displays a collapse trigger button, dashboard title, and mock profile widgets.
• Statistics Grid: A grid layout showing KPI cards for Active Users, Sales Revenue, and System Load.
• Recent Registrants Table: A table card detailing new signups, displaying user names and subscription plans.

3. Step-by-Step Implementation Guide

Step 1: Decompose Layout Components

Create the modular file structure:

• sidebar.component.ts: Handles navigation list rendering.
• header.component.ts: Emits toggle events.
• dashboard.component.ts: Acts as the parent container coordinating layout structures.

Step 2: Share Layout State via Signals

Define a sidebarCollapsed signal in the parent component and bind it to components. It automatically tracks view redraw needs.

Step 3: Enable OnPush Strategy

Add changeDetection: ChangeDetectionStrategy.OnPush to all child components to ensure checks are bypassed unless input properties reference updates.

4. Full Working Code

Save these code structures to build the dashboard shell:

5. Reviewing the Build / Self-Correction Checks

Verify your component rendering cycle operates efficiently:

• Check OnPush propagation: Verify child components are not re-evaluated during parent states updates unless their own inputs update.
• Test transition smoothness: Verify the sidebar folding transition moves smoothly. Verify text labels in the sidebar are completely hidden during collapse to avoid rendering overflow bugs.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this dashboard, you have structured parent-child standalone interactions, checked variables, and applied OnPush optimizations.

• Next, proceed to **Project 3 — CRM** to build an application containing custom forms and data tables.

---