modus-angular-20

Angular 20 Best Practices

This project adheres to modern Angular best practices, emphasizing maintainability, performance, accessibility, and scalability.

TypeScript Best Practices

• Strict Type Checking: Always enable and adhere to strict type checking.
• Prefer Type Inference: Allow TypeScript to infer types when they are obvious from the context.
• Avoid any: Do not use the any type unless absolutely necessary. Prefer unknown when a type is uncertain.

Angular Best Practices

• Standalone Components: Always use standalone components, directives, and pipes. Avoid using NgModules for new features.
• Implicit Standalone: Do not explicitly set standalone: true inside the @Component, @Directive and @Pipe decorators, as it is implied by default.
• Signals for State Management: Utilize Angular Signals for reactive state management within components and services.
• Lazy Loading: Implement lazy loading for feature routes to improve initial load times.
• NgOptimizedImage: Use NgOptimizedImage for all static images to automatically optimize image loading and performance.
• Host bindings: Do NOT use the @HostBinding and @HostListener decorators. Put host bindings inside the host object of the @Component or @Directive decorator instead.

Components

• Single Responsibility: Keep components small, focused, and responsible for a single piece of functionality.
• input() and output() Functions: Prefer input() and output() functions over the @Input() and @Output() decorators:

  import { input, output } from '@angular/core';
  
  userId = input<string>('');
  userSelected = output<string>();
  

• computed() for Derived State: Use the computed() function from @angular/core for derived state based on signals.
• ChangeDetectionStrategy.OnPush: Always set changeDetection: ChangeDetectionStrategy.OnPush in the @Component decorator.
• Inline Templates: Prefer inline templates (template: ...) for small components. For larger templates, use external HTML files.
• Reactive Forms: Prefer Reactive forms over Template-driven forms for complex forms.
• No ngClass / NgClass: Do not use the ngClass directive. Instead, use native class bindings:

  <section [class.active]="isActive"></section>
  <section [class]="{'active': isActive}"></section>
  

• No ngStyle / NgStyle: Do not use the ngStyle directive. Instead, use native style bindings:

  <section [style.font-size.px]="fontSize"></section>