Style guide & naming

user-profile.ts          ← componenta (clasa UserProfile)
user-profile.html        ← template
user-profile.scss        ← stiluri
user-profile.spec.ts     ← test
                         același nume de bază = ușor de găsit, ușor de mutat împreună

auth-store.ts            ← serviciu cu stare
users-api.ts             ← serviciu de acces la date
time-ago-pipe.ts         ← pipe (clasa TimeAgoPipe)
auth-guard.ts            ← guard funcțional (authGuard)

// Preferi sufixele vechi (.component.ts, .service.ts)? Le poți păstra din 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": "." }
  }
}
// Important e să fie CONSECVENT în tot proiectul.

@Component({
  selector: 'app-user-profile',
  imports: [Avatar, DatePipe],
  templateUrl: './user-profile.html',
  styleUrl: './user-profile.scss',
  host: { '[class.compact]': 'compact()' },
})
export class UserProfile {
  // 1. API-ul componentei: 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. Dependențe (private readonly)
  private readonly users = inject(UsersStore);

  // 4. Stare și derivate — protected dacă le folosește doar template-ul
  protected readonly user = computed(() => this.users.byId(this.userId()));
  protected readonly editing = signal(false);

  // 5. Metode — numite după CE FAC, nu după evenimentul care le declanșează
  protected startEditing(): void {
    this.editing.set(true);
  }
}

// ✓ inject() în loc de constructor
private readonly http = inject(HttpClient);

// ✓ protected pentru membrii folosiți doar în template (nu fac parte din API-ul public)
protected readonly fullName = computed(() => `${this.first()} ${this.last()}`);

// ✓ readonly pentru tot ce inițializează Angular: input, output, model, viewChild, signal
readonly value = model(0);

// ✓ host: {} în loc de @HostBinding / @HostListener
host: { '[attr.aria-expanded]': 'open()', '(keydown.escape)': 'close()' }

// ✓ [class.x] / [style.x] în loc de ngClass / ngStyle
// ✓ @if / @for / @switch în loc de *ngIf / *ngFor / ngSwitch
// ✓ hook-uri de lifecycle subțiri: apelează metode cu nume clare
ngOnInit() { this.loadInitialFilters(); }

<!-- ✗ numele descrie evenimentul -->
<button (click)="handleClick()">Salvează</button>
<input (keydown.enter)="onKeydown()" />

<!-- ✓ numele descrie acțiunea -->
<button (click)="saveProfile()">Salvează</button>
<input (keydown.enter)="search()" />

@Component({ selector: 'app-user-card' })        // element, kebab-case, cu prefix
@Directive({ selector: '[appTooltip]' })         // atribut, camelCase, cu prefix
@Pipe({ name: 'relativeTime' })                  // camelCase, fără prefix

// 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                # constructor → 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               # cele trei de mai sus, într-un singur pas
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 # importuri nefolosite din componente

user-card.ts / .html / .css / .spec.ts   un concept per fișier, fără sufix de tip
class UserCard                            fără Component la final
selector: app-user-card   [appTooltip]   prefix pe selectori
inject()  protected  readonly             în componente
saveProfile()  not  onClick()             handler-e numite după acțiune
ng generate @angular/core:<migrare>