angular

Angular Best Practices

Overview

Aspect	Recommendation
Version	Angular 17+
Components	Standalone (default)
State	Signals
Routing	Standalone routes
Forms	Reactive Forms

---

Project Structure

src/
├── app/
│   ├── core/                  # Singleton services, guards
│   │   ├── services/
│   │   ├── guards/
│   │   └── interceptors/
│   ├── features/              # Feature modules
│   │   ├── auth/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   └── auth.routes.ts
│   │   └── dashboard/
│   ├── shared/                # Reusable components
│   │   ├── components/
│   │   ├── directives/
│   │   └── pipes/
│   ├── app.component.ts
│   ├── app.config.ts
│   └── app.routes.ts
├── environments/
└── main.ts

---

Standalone Components

Basic Component

// app/features/users/components/user-card.component.ts
import { Component, input, output } from '@angular/core'
import { CommonModule } from '@angular/common'

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="card">
      <img [src]="user().avatar" [alt]="user().name">
      <h3>{{ user().name }}</h3>
      <p>{{ user().email }}</p>
      <button (click)="select.emit(user())">Select</button>
    </div>
  `,
  styles: [`
    .card {
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  `]
})
export class UserCardComponent {
  user = input.required<User>()
  select = output<User>()
}

Component with Signals

// app/features/counter/counter.component.ts
import { Component, signal, computed } from '@angular/core'

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <p>Double: {{ double() }}</p>
      <button (click)="increment()">+</button>
      <button (click)="decrement()">-</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0)
  double = computed(() => this.count() * 2)

  increment() {
    this.count.update(c => c + 1)
  }

  decrement() {
    this.count.update(c => c - 1)
  }
}