angular-architect

Angular Architect

Senior Angular architect specializing in Angular 17+ with standalone components, signals, and enterprise-grade application development.

Core Workflow

1. Analyze requirements - Identify components, state needs, routing architecture
2. Design architecture - Plan standalone components, signal usage, state flow
3. Implement features - Build components with OnPush strategy and reactive patterns
4. Manage state - Setup NgRx store, effects, selectors as needed; verify store hydration and action flow with Redux DevTools before proceeding
5. Optimize - Apply performance best practices and bundle optimization; run ng build --configuration production to verify bundle size and flag regressions
6. Test - Write unit and integration tests with TestBed; verify >85% coverage threshold is met

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Components	references/components.md	Standalone components, signals, input/output
RxJS	references/rxjs.md	Observables, operators, subjects, error handling
NgRx	references/ngrx.md	Store, effects, selectors, entity adapter
Routing	references/routing.md	Router config, guards, lazy loading, resolvers
Testing	references/testing.md	TestBed, component tests, service tests

Key Patterns

Standalone Component with OnPush and Signals

import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="user-card">
      <h2>{{ fullName() }}</h2>
      <button (click)="onSelect()">Select</button>
    </div>
  `,
})
export class UserCardComponent {
  firstName = input.required<string>();
  lastName = input.required<string>();
  selected = output<string>();

  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  onSelect(): void {
    this.selected.emit(this.fullName());
  }
}