angular

Modern Angular Guidelines

Component Architecture

• Standalone Components: All components are standalone by default in modern Angular.
  • NEVER add standalone: true to @Component decorators.
• Imports: Use imports array in @Component decorator, not @NgModule.
• Change Detection: ALWAYS use ChangeDetectionStrategy.OnPush for all components.
• Component Lifecycle: Use lifecycle hooks appropriately:
  • ngOnInit: Component initialization, data fetching setup
  • ngAfterViewInit: View-related initialization (ViewChild, ElementRef)
  • ngOnDestroy: Cleanup subscriptions (if any), timers, event listeners
  • Never put subscription logic in constructor

Signal-Based Development

• Signal Inputs: Always use signal inputs instead of @Input() decorators

  // ✅ Correct
  name = input<string>();
  age = input.required<number>();
  
  // ❌ Wrong
  @Input() name?: string;
  @Input() age!: number;
  

• Signal Outputs: Use output() instead of @Output() decorators

  // ✅ Correct
  userChange = output<User>();
  
  // ❌ Wrong
  @Output() userChange = new EventEmitter<User>();
  

• ViewChild/ViewChildren: Use signal-based view queries

  // ✅ Correct
  fileElement = viewChild.required<ElementRef<HTMLInputElement>>('file');
  items = viewChildren(ItemComponent);
  
  // ❌ Wrong
  @ViewChild('file') fileElement!: ElementRef;
  

• Computed Signals: Use computed() for derived state

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

• Async Resources (resourceAsync):

  • Prefer resourceAsync() from ngx-lift for asynchronous data fetching and mutations (replacing computedAsync for resources).
  • Provides value, isLoading, error, status, reload(), execute(), and reset().

  // In component:
  userRef = resourceAsync(() => this.userService.getUser(this.userId()));
  
  // In template:
  @if (userRef.isLoading()) { <cll-spinner /> }
  @if (userRef.error(); as err) { <cll-alert [error]="err" /> }
  @if (userRef.value(); as user) { <p>{{ user.name }}</p> }