Technical reference

Angular Cheatsheet

Full-featured TypeScript application framework

Must Know

typescript

Standalone Component

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<h2>{{ user().name }}</h2>`,
})
export class UserComponent { user = input.required<User>(); }

bash

CLI

ng new my-app
ng generate component users/user-card
ng serve
ng test
ng build

Important Patterns

typescript

Signals

count = signal(0);
doubled = computed(() => this.count() * 2);

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

typescript

HTTP Service

@Injectable({ providedIn: 'root' })
export class UsersService {
  private http = inject(HttpClient);
  getAll() { return this.http.get<User[]>('/api/users'); }
}

Useful Recipes

html

Control Flow

@if (users().length) {
  @for (user of users(); track user.id) { <app-user [user]="user" /> }
} @else { <p>No users</p> }

typescript

Lazy Route

Lazy loading reduces the initial bundle.

{ path: 'admin', loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent) }

Pitfalls & Production

typescript

RxJS Cleanup

Prevent subscriptions from surviving destroyed components.

private destroyRef = inject(DestroyRef);

stream$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();

Change Detection

Keep template work predictable and measurable.

ChangeDetectionStrategy.OnPush
track item.id
pure pipes
avoid functions in templates