| 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. |
Explore 500+ free tutorials across 20+ languages and frameworks.