950-angular-data-flow

Angular Data Flow Patterns

• Bi-directional Data Flow Architecture: Follow a consistent data flow pattern in the application:

                    READ (Direct)
           ┌─────────────────────────┐
           │                         │
           ▼                         │
┌───────────────────┐     ┌───────────────────┐
│                   │     │                   │
│    Components     │     │   Global State    │
│    (Consumers)    │     │    (Storage)      │
│                   │     │                   │
└───────────────────┘     └───────────────────┘
           │                         ▲
           ▼                         │
┌───────────────────┐                │
│                   │                │
│     Services      │────────────────┘
│                   │
└───────────────────┘

• Read Operations (Global State to Component): Components read directly from the global state via store signals.

@Component({
  selector: 'app-product-detail',
  template: `
    @if (isLoading()) {
      <app-spinner></app-spinner>
    } @else if (product()) {
      <h1>{{ product()?.name }}</h1>
      <p>{{ product()?.description }}</p>
      <p>Price: {{ product()?.price | currency }}</p>
      
      <button (click)="addToCart(product()!.id)">Add to Cart</button>
    } @else {
      <p>Product not found</p>
    }
  `
})
export class ProductDetailComponent {
  // Read directly from store signals
  product = inject(ProductStore).selectedProduct;
  isLoading = inject(ProductStore).loading;
  
  constructor(private cartService: CartService) {}
  
  // Action through service
  addToCart(productId: string): void {
    this.cartService.addToCart(productId);
  }
}

• Write Operations (Component to Global State): Components write to global state through services, not directly.

// ❌ AVOID: Component manipulating state directly
@Component({...})
export class BadComponent {
  constructor(private userStore: UserStore) {}
  
  updateUser() {
    // Direct store manipulation from component is an anti-pattern
    this.userStore.setUser({
      id: '123',
      name: 'John Doe',
      email: '[email protected]'
    });
  }
}

// ✅ GOOD: Component using service as mediator
@Component({...})
export class GoodComponent {
  // Reading from store is fine
  user = inject(UserStore).user;
  
  // Writing goes through service
  constructor(private userService: UserService) {}
  
  updateUser() {
    // Service handles validation, API calls, and store updates
    this.userService.updateUser({
      id: '123',
      name: 'John Doe',
      email: '[email protected]'
    });
  }
}

• Service as Mediator: Services handle business logic, API communication, and state updates.

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  constructor(
    private http: HttpClient,
    private productStore: ProductStore
  ) {}
  
  loadProducts(): Observable<Product[]> {
    // Update loading state
    this.productStore.setLoading(true);
    
    // Call API
    return this.http.get<Product[]>('/api/products').pipe(
      tap(products => {
        // Update state with returned data
        this.productStore.setProducts(products);
        this.productStore.setLoading(false);
      }),
      catchError(error => {
        // Update error state
        this.productStore.setError(error.message);
        this.productStore.setLoading(false);
        return throwError(() => error);
      })
    );
  }
  
  addProduct(product: Product): Observable<Product> {
    // Validate product
    if (!this.validateProduct(product)) {
      return throwError(() => new Error('Invalid product'));
    }
    
    // Call API
    return this.http.post<Product>('/api/products', product).pipe(
      tap(newProduct => {
        // Update store with new product
        this.productStore.addProduct(newProduct);
      })
    );
  }
  
  private validateProduct(product: Product): boolean {
    // Business logic validation
    return !!product.name && product.price > 0;
  }
}