angular-20

Angular 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. This helps catch errors early and improves code quality.
• Prefer Type Inference: Allow TypeScript to infer types when they are obvious from the context. This reduces verbosity while maintaining type safety.
  • Bad:

    let name: string = 'Angular';
    

  • Good:

    let name = 'Angular';
    

• Avoid any: Do not use the any type unless absolutely necessary as it bypasses type checking. Prefer unknown when a type is uncertain and you need to handle it safely.

Angular Best Practices

• Standalone Components: Always use standalone components, directives, and pipes. Avoid using NgModules for new features or refactoring existing ones.
• Implicit Standalone: When creating standalone components, you do not need to explicitly set standalone: true as it is implied by default when generating a standalone component.
  • Bad:

    @Component({
      standalone: true,
      // ...
    })
    export class MyComponent {}
    

  • Good:

    @Component({
      // `standalone: true` is implied
      // ...
    })
    export class MyComponent {}
    

• 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 of your application.
• NgOptimizedImage: Use NgOptimizedImage for all static images to automatically optimize image loading and performance.

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 for defining component inputs and outputs.
  • Old Decorator Syntax:

    @Input() userId!: string;
    @Output() userSelected = new EventEmitter<string>();
    

  • New Function Syntax:

    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 for performance benefits by reducing unnecessary change detection cycles.
• Inline Templates: Prefer inline templates (template: ...) for small components to keep related code together. For larger templates, use external HTML files.
• Reactive Forms: Prefer Reactive forms over Template-driven forms for complex forms, validation, and dynamic controls due to their explicit, immutable, and synchronous nature.
• No ngClass / NgClass: Do not use the ngClass directive. Instead, use native class bindings for conditional styling.
  • Bad:

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

  • Good:

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

• No ngStyle / NgStyle: Do not use the ngStyle directive. Instead, use native style bindings for conditional inline styles.
  • Bad:

    <section [ngStyle]="{'font-size': fontSize + 'px'}"></section>
    

  • Good:

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