Guide de style et nommage

user-profile.ts          ← le composant (classe UserProfile)
user-profile.html        ← template
user-profile.scss        ← styles
user-profile.spec.ts     ← test
                         le même nom de base = facile à trouver, facile à déplacer ensemble

auth-store.ts            ← service avec état
users-api.ts             ← service d’accès aux données
time-ago-pipe.ts         ← pipe (classe TimeAgoPipe)
auth-guard.ts            ← guard fonctionnel (authGuard)

// Vous préférez les anciens suffixes (.component.ts, .service.ts) ? Vous pouvez les garder dans angular.json :
{
  "schematics": {
    "@schematics/angular:component": { "type": "component" },
    "@schematics/angular:directive": { "type": "directive" },
    "@schematics/angular:service": { "type": "service" },
    "@schematics/angular:guard": { "typeSeparator": "." },
    "@schematics/angular:pipe": { "typeSeparator": "." }
  }
}
// Ce qui compte, c’est d’être COHÉRENT dans tout le projet.

@Component({
  selector: 'app-user-profile',
  imports: [Avatar, DatePipe],
  templateUrl: './user-profile.html',
  styleUrl: './user-profile.scss',
  host: { '[class.compact]': 'compact()' },
})
export class UserProfile {
  // 1. L’API du composant : inputs, models, outputs (readonly)
  readonly userId = input.required<number>();
  readonly compact = input(false, { transform: booleanAttribute });
  readonly edit = output<number>();

  // 2. Queries (readonly)
  private readonly nameInput = viewChild<ElementRef<HTMLInputElement>>('name');

  // 3. Dépendances (private readonly)
  private readonly users = inject(UsersStore);

  // 4. État et valeurs dérivées — protected si seul le template les utilise
  protected readonly user = computed(() => this.users.byId(this.userId()));
  protected readonly editing = signal(false);

  // 5. Méthodes — nommées d’après CE QU’ELLES FONT, pas d’après l’événement qui les déclenche
  protected startEditing(): void {
    this.editing.set(true);
  }
}

// ✓ inject() plutôt que le constructeur
private readonly http = inject(HttpClient);

// ✓ protected pour les membres utilisés uniquement dans le template (hors API publique)
protected readonly fullName = computed(() => `${this.first()} ${this.last()}`);

// ✓ readonly pour tout ce qu’Angular initialise : input, output, model, viewChild, signal
readonly value = model(0);

// ✓ host: {} plutôt que @HostBinding / @HostListener
host: { '[attr.aria-expanded]': 'open()', '(keydown.escape)': 'close()' }

// ✓ [class.x] / [style.x] plutôt que ngClass / ngStyle
// ✓ @if / @for / @switch plutôt que *ngIf / *ngFor / ngSwitch
// ✓ lifecycle hooks minces : appelez des méthodes aux noms clairs
ngOnInit() { this.loadInitialFilters(); }

<!-- ✗ le nom décrit l’événement -->
<button (click)="handleClick()">Enregistrer</button>
<input (keydown.enter)="onKeydown()" />

<!-- ✓ le nom décrit l’action -->
<button (click)="saveProfile()">Enregistrer</button>
<input (keydown.enter)="search()" />

@Component({ selector: 'app-user-card' })        // élément, kebab-case, avec préfixe
@Directive({ selector: '[appTooltip]' })         // attribut, camelCase, avec préfixe
@Pipe({ name: 'relativeTime' })                  // camelCase, sans préfixe

// angular.json → projects.<app>.prefix: "app"

ng generate @angular/core:standalone            # NgModule → standalone
ng generate @angular/core:control-flow          # *ngIf / *ngFor → @if / @for
ng generate @angular/core:inject                # constructeur → inject()
ng generate @angular/core:signal-inputs         # @Input → input()
ng generate @angular/core:outputs               # @Output → output()
ng generate @angular/core:signal-queries        # @ViewChild & co. → viewChild()
ng generate @angular/core:signals               # les trois ci-dessus, en une étape
ng generate @angular/core:service               # @Injectable → @Service (v22)
ng generate @angular/core:route-lazy-loading    # component: → loadComponent
ng generate @angular/core:self-closing-tag      # <app-x></app-x> → <app-x />
ng generate @angular/core:ngclass-to-class      # [ngClass] → [class]
ng generate @angular/core:ngstyle-to-style      # [ngStyle] → [style]
ng generate @angular/core:cleanup-unused-imports # imports inutilisés dans les composants

user-card.ts / .html / .css / .spec.ts   un concept par fichier, sans suffixe de type
class UserCard                            sans Component à la fin
selector: app-user-card   [appTooltip]   préfixe sur les sélecteurs
inject()  protected  readonly             dans les composants
saveProfile()  not  onClick()             handlers nommés d’après l’action
ng generate @angular/core:<migration>