Project 3 — CRM

1. Learning Objectives

In this project guide, you will build a complete Customer Relationship Management (CRM) panel. By the end of this project, you will be able to:

• Encapsulate business logic and API requests inside Angular Services.
• Build complex forms using ReactiveForms (FormGroup, FormBuilder).
• Apply custom input validators to check email formatting and phone fields.
• Implement reactive filters to filter lists dynamically.
• Structure data tables with actions to edit and delete records.

2. What We Are Building & Design System

We are building a CRM customer manager. The application features:

• Customer Service: A service that stores customer data and exposes signals for querying.
• Reactive Edit Form: A slide-over panel with validation rules for adding or editing customer names, emails, and subscription tiers.
• Search Bar: A query input that filters customer listings in real-time.
• Interactive Data Table: Renders names, emails, roles, and status tags with action buttons.

3. Step-by-Step Implementation Guide

Step 1: Define the Customer Model

Define structure parameters for customer entries:

Step 2: Build the Reactive Form

Inject FormBuilder and declare the validation constraints inside your component class:

Step 3: Define Filter Pipes

Create search query binding signals to filter database arrays in real-time.

4. Full Working Code

Save these code structures to build the CRM component:

5. Reviewing the Build / Self-Correction Checks

Verify your form and validation cycles operate correctly:

• Check form validation states: Verify that the "Save Customer" submit button remains disabled until you type a valid name (3+ chars) and a valid email format (e.g. name@domain.com).
• Verify search filtering speed: Type keys in the search input box and confirm the table rows update dynamically using signals without full layout redraws.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this CRM dashboard, you have integrated Angular Services, form builders, and signal-based list calculations.

• Next, proceed to **Project 4 — Ecommerce** to build a checkout app utilizing complex state stores and routes.

---