Styleguide & Namensgebung

user-profile.ts          ← die Komponente (Klasse UserProfile)
user-profile.html        ← Template
user-profile.scss        ← Styles
user-profile.spec.ts     ← Test
                         derselbe Basisname = leicht zu finden, gemeinsam leicht zu verschieben

auth-store.ts            ← Service mit Zustand
users-api.ts             ← Service für den Datenzugriff
time-ago-pipe.ts         ← Pipe (Klasse TimeAgoPipe)
auth-guard.ts            ← funktionaler Guard (authGuard)

// Du bevorzugst die alten Suffixe (.component.ts, .service.ts)? Du kannst sie in der angular.json behalten:
{
  "schematics": {
    "@schematics/angular:component": { "type": "component" },
    "@schematics/angular:directive": { "type": "directive" },
    "@schematics/angular:service": { "type": "service" },
    "@schematics/angular:guard": { "typeSeparator": "." },
    "@schematics/angular:pipe": { "typeSeparator": "." }
  }
}
// Wichtig ist, im ganzen Projekt KONSISTENT zu sein.

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

  // 4. Zustand und abgeleitete Werte — protected, wenn nur das Template sie nutzt
  protected readonly user = computed(() => this.users.byId(this.userId()));
  protected readonly editing = signal(false);

  // 5. Methoden — benannt nach DEM, WAS SIE TUN, nicht nach dem Event, das sie auslöst
  protected startEditing(): void {
    this.editing.set(true);
  }
}

// ✓ inject() statt Konstruktor
private readonly http = inject(HttpClient);

// ✓ protected für Member, die nur im Template verwendet werden (nicht Teil der öffentlichen API)
protected readonly fullName = computed(() => `${this.first()} ${this.last()}`);

// ✓ readonly für alles, was Angular initialisiert: input, output, model, viewChild, signal
readonly value = model(0);

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

// ✓ [class.x] / [style.x] statt ngClass / ngStyle
// ✓ @if / @for / @switch statt *ngIf / *ngFor / ngSwitch
// ✓ schlanke Lifecycle-Hooks: rufen Methoden mit klaren Namen auf
ngOnInit() { this.loadInitialFilters(); }

<!-- ✗ der Name beschreibt das Event -->
<button (click)="handleClick()">Speichern</button>
<input (keydown.enter)="onKeydown()" />

<!-- ✓ der Name beschreibt die Aktion -->
<button (click)="saveProfile()">Speichern</button>
<input (keydown.enter)="search()" />

@Component({ selector: 'app-user-card' })        // Element, kebab-case, mit Präfix
@Directive({ selector: '[appTooltip]' })         // Attribut, camelCase, mit Präfix
@Pipe({ name: 'relativeTime' })                  // camelCase, ohne Präfix

// 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                # Konstruktor → 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               # die drei oben, in einem Schritt
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 # ungenutzte Importe in Komponenten

user-card.ts / .html / .css / .spec.ts   ein Konzept pro Datei, ohne Typ-Suffix
class UserCard                            ohne Component am Ende
selector: app-user-card   [appTooltip]   Präfix auf Selektoren
inject()  protected  readonly             in Komponenten
saveProfile()  not  onClick()             Handler nach der Aktion benannt
ng generate @angular/core:<Migration>