Angular Cheat Sheet

This cheat sheet condenses the entire course into a single, fast-scanning reference. Use it while coding to quickly recall syntax without reopening each individual lesson.

How to Use This Cheat Sheet

Each table below covers one area of Angular, matching the order of lessons in this course, so you can jump straight to the syntax you need without re-reading full explanations.

For the reasoning and deeper context behind any entry, revisit that topic's dedicated lesson earlier in this course.

{{ value }}                 // interpolation
[property]="expr"           // property binding
(event)="handler()"          // event binding
[(ngModel)]="value"          // two-way binding

These four lines cover the majority of everyday Angular template syntax.

Quick Project Commands

ng new my-app
ng serve
ng generate component my-thing
ng build
ng test

ng new scaffolds a project; ng serve runs it locally with hot reload.
ng generate (or ng g) creates components, services, pipes, guards, and more.
ng build produces a production build; ng test runs unit tests.
See the tables below for deeper syntax across every major Angular feature.

Template Syntax Reference

The core template binding forms used in every Angular view.

Syntax	Example	Purpose
Interpolation	`{{ user.name }}`	Render text content
Property binding	`[src]="imageUrl"`	Bind a DOM property
Attribute binding	`[attr.aria-label]="label"`	Bind an HTML attribute directly
Class binding	`[class.active]="isActive"`	Toggle a single class
Style binding	`[style.color]="color"`	Set a single inline style
Event binding	`(click)="save()"`	Handle a DOM event
Two-way binding	`[(ngModel)]="name"`	Bind and update together
Template ref var	`#input`	Reference an element/component in the template

Control Flow Reference

Purpose	Modern Syntax	Classic Syntax
Conditional	`@if (cond) { }`	`*ngIf="cond"`
Conditional + else	`@if () { } @else { }`	`*ngIf="cond; else t"`
Loop	`@for (x of xs; track x.id) { }`	`*ngFor="let x of xs"`
Empty state	`@for (...) { } @empty { }`	manual `*ngIf="!xs.length"`
Switch	`@switch () { @case () { } }`	`[ngSwitch]`, `*ngSwitchCase`

Components, Inputs/Outputs, and DI Reference

Concept	Example
Component	`@Component({ selector, standalone: true, template/templateUrl })`
Input (classic)	`@Input() value = '';`
Input (modern)	`value = input('');`
Required input (modern)	`id = input.required<string>();`
Output (classic)	`@Output() saved = new EventEmitter<void>();`
Output (modern)	`saved = output<void>();`
Injectable service	`@Injectable({ providedIn: 'root' })`
inject()	`private http = inject(HttpClient);`

Routing, Forms, and HTTP Reference

Concept	Example
Route definition	`{ path: 'x/:id', component: X, canActivate: [guard] }`
Lazy route	`loadComponent: () => import('./x.component').then(m => m.X)`
Read a route param	`inject(ActivatedRoute).snapshot.paramMap.get('id')`
Reactive form group	`this.fb.group({ email: ['', Validators.required] })`
Bind a form group	`<form [formGroup]="form">`
HTTP GET	`this.http.get<T>('/api/x')`
Functional interceptor	`provideHttpClient(withInterceptors([myInterceptor]))`

RxJS and Signals Reference

Concept	Example
Signal	`count = signal(0);`
Read a signal	`count()`
Update a signal	`count.update(v => v + 1)`
Computed signal	`computed(() => count() * 2)`
Effect	`effect(() => console.log(count()))`
Async pipe	`{{ data$ \| async }}`
Debounced search	`term$.pipe(debounceTime(300), switchMap(fn))`
Auto-unsubscribe	`.pipe(takeUntilDestroyed())`

Common Mistakes

Treating this cheat sheet as a substitute for understanding the reasoning in each topic's dedicated lesson.
Copying syntax without checking whether the modern or classic form fits your project's Angular version.
Skipping the deeper lesson when a cheat sheet entry doesn't fully make sense in context.
Not revisiting this page periodically as Angular's recommended defaults continue to evolve.

Key Takeaways

This cheat sheet condenses template syntax, components, DI, routing, forms, HTTP, RxJS, and signals into quick reference tables.
Each entry maps to a deeper lesson earlier in this course for full context and reasoning.
Prefer modern syntax (@if/@for, input()/output(), signals) for new code where applicable.
Use this page as an ongoing quick reference while building real Angular applications.

Pro Tip

Bookmark this cheat sheet page specifically, of everything in this course, it's the page you'll likely return to most often once you're comfortable with the underlying concepts and just need a fast syntax reminder.