Angular Cheat Sheet
| Bootstrapping | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
|---|---|
platformBrowserDynamic().bootstrapModule(AppModule); | It bootstraps the application, using the root component from the specified NgModule. |
| NgModules | import { NgModule } from '@angular/core'; |
|---|---|
@NgModule({declarations: [], imports: [], exports: [], providers: [], bootstrap: []}); | It specifies a module, which contains components, directives, pipes, and providers. |
declarations: [MyFirstComponent, MySecondComponent, MyDatePipe] | It contains the list of components, directives, and pipes which belong to current module. |
imports: [BrowserModule, MyModule] | It contains the list of modules to import into current module. |
exports: [MyFirstComponent, MyDatePipe] | It contains the list of components, directives, and pipes visible to modules that import this module. |
providers: [MyFirstService, { provide: ... }] | It contains the list of dependency injection providers visible both to the contents of this module and to importers of this module. |
entryComponents: [MyFirstComponent, MySecondComponent] | It contains the list of components not referenced in any reachable template(i.e. dynamically created from code). |
bootstrap: [MyAppComponent] | It contains the list of components to bootstrap when this module is bootstrapped. |
| Class Decorators | import { Directive, ... } from '@angular/core'; |
|---|---|
@Component({...}); | It will convert class as a component and provides metadata about the component. |
@Directive({...}); | It will convert class as a directive and provides metadata about the directive. |
@Pipe({...}); | It will convert class as a pipe and provides metadata about the pipe. |
@Injectable({...}); | It declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. |
| Signals (Angular 21) | import { signal, computed, effect } from '@angular/core'; |
|---|---|
const count = signal(0); | Creates a writable signal with initial value 0. |
count.set(5); | Sets the signal value to 5. |
count.update(v => v + 1); | Updates the signal value based on current value. |
const double = computed(() => count() * 2); | Creates a derived read-only signal. |
effect(() => console.log(count())); | Runs a side effect when signals change. |
| Standalone Components (Angular 21) | import { Component } from '@angular/core'; |
|---|---|
@Component({ standalone: true, imports: [...] }) | Declares a standalone component with its own imports. |
bootstrapApplication(AppComponent, appConfig) | Bootstraps a standalone application without NgModule. |
provideRouter(routes) | Provides the router in a standalone application. |
provideAnimationsAsync() | Provides animations lazily for better performance. |
| Built-in Control Flow (Angular 17+) | Template syntax |
|---|---|
@if (condition) { } @else { } | Conditional rendering - replaces *ngIf. |
@for (item of items; track item.id) { } | List rendering - replaces *ngFor. |
@switch (val) { @case (x) { } @default { } } | Switch rendering - replaces *ngSwitch. |
@defer { } @loading { } @placeholder { } @error { } | Lazy loading block for deferred content. |
@let name = expression; | Declares a local template variable. |
Related Angular Topics