Angular Ultimate Cheat Sheet v22+

🚀 Angular CLI

ng new my-app          # Új projekt
ng serve               # Fejlesztői szerver
ng generate c path     # Komponens generálás
ng build               # Production build
ng test                # Unit tesztek futtatása
ng update              # Verziófrissítés

🧩 Komponensek (Standalone)

@Component({
  selector: 'app-ui',
  standalone: true,
  imports: [CommonModule, ButtonComponent],
  template: `...`
})
export class UiComponent {
  // Dependency Injection (Modern)
  private api = inject(ApiService);
}

🔄 Új Control Flow v17+

Kondicionálisok

@if (loggedIn) { ... } 
@else if (pending) { ... } 
@else { ... }

Ciklusok

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <p>Nincs adat</p>
}

⚡ Signals (Reaktivitás)

const count = signal(0);
count();               // Olvasás
count.set(10);         // Beállítás
count.update(v => v+1); // Frissítés

const double = computed(() => count() * 2);

effect(() => {
  console.log('Változott:', count());
});

📡 Adatáramlás (Signal Based)

// Input (v17.1+)
name = input<string>();
requiredName = input.required<string>();

// Output
changed = output<number>();
this.changed.emit(5);

// Model (Two-way)
count = model(0);

🌐 API & HTTP

// Új httpResource (v22+)
users = httpResource<User[]>('/api/users');

// Template használat
@if (users.value()) {
  {{ users.value() | json }}
}
@if (users.isLoading()) { ... }

📦 Deferrable Views v17+

@defer (on viewport; prefetch on idle) {
  <app-heavy-chart />
} @placeholder {
  <div>Töltés...</div>
} @loading (after 100ms; minimum 500ms) {
  <app-spinner />
} @error {
  <p>Hiba történt</p>
}

🗺️ Routing (Modern)

export const routes: Routes = [{
  path: 'user/:id',
  component: UserComponent,
  // Functional Guard
  canActivate: [() => inject(Auth).isLoggedIn()],
  // Functional Resolver
  resolve: { 
    data: (route) => inject(Service).get(route.params['id']) 
  }
}];

🔄 Lifecycle Hooks (New)

constructor() {
  // Lefut minden renderelés után
  afterRender(() => {
    console.log('DOM frissült');
  });

  // Csak a legközelebbi renderelés után
  afterNextRender(() => {
    this.focusInput();
  });
}

📝 Signal Forms v22+

// Pehelykönnyű reaktív űrlapok
userForm = signalForm({
  name: signal(''),
  email: signal('', [Validators.required])
});

// Használat
@if (userForm.valid()) { ... }
<input [formControl]="userForm.name">

🚀 Performance & Zoneless

// bootstrapApplication (main.ts)
bootstrapApplication(App, {
  providers: [
    // Zone.js kikapcsolása
    provideExperimentalZonelessChangeDetection()
  ]
});