References

This final chapter serves as a comprehensive reference for Angular's core API, DOM abstractions, and key modules. Use it as a quick lookup guide when building your applications.

Angular Core API

The @angular/core package provides the foundational building blocks of any Angular application.

Decorators

• @Component — Declares a component with selector, template, styles, and change detection
• @Directive — Creates a structural or attribute directive
• @Pipe — Transforms template values
• @Injectable — Marks a class as available for dependency injection
• @NgModule — Groups related components, directives, pipes, and services
• @Input — Binds a property to a parent template expression
• @Output — Emits custom events to the parent
• @HostBinding — Binds a property to the host element
• @HostListener — Listens to events on the host element
• @ViewChild / @ViewChildren — Queries child elements or components
• @ContentChild / @ContentChildren — Queries projected content

Core Classes

• Renderer2 — Safe DOM manipulation abstraction
• ElementRef — Reference to the host element
• ViewContainerRef — Container for dynamically created views
• ComponentFactoryResolver — Resolves component factories for dynamic creation
• ChangeDetectorRef — Controls change detection for a view
• NgZone — Manages execution outside Angular's zone

DOM Reference (Renderer2)

Use Renderer2 instead of directly manipulating the DOM. It ensures compatibility across different rendering environments (browser, server, web worker).

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'background');
  }

  setColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}

API Reference by Module

Router (@angular/router)

• RouterModule.forRoot(routes) — Configures root routes
• RouterLink / RouterLinkActive — Template navigation directives
• RouterOutlet — Renders matched route component
• ActivatedRoute — Access route parameters, query params, data
• CanActivate, CanDeactivate, Resolve — Route guards

Forms (@angular/forms)

• FormGroup, FormControl, FormArray — Reactive form classes
• Validators — Built-in validation (required, email, minLength, etc.)
• FormsModule — Template-driven forms
• ReactiveFormsModule — Reactive forms

HTTP (@angular/common/http)

• HttpClient — HTTP request methods (get, post, put, delete)
• HttpInterceptor — Intercept and modify requests/responses
• HttpParams — Build URL query parameters
• HttpHeaders — Build HTTP headers

Compiler (@angular/compiler)

• compileComponent, compileNgModule — JIT compilation API
• Compiler — Programmatic access to the Angular compiler

Animations (@angular/animations)

• trigger, state, style, transition, animate, keyframes
• group, sequence, query, stagger — Complex animation helpers

Common (@angular/common)

• NgIf, NgFor, NgSwitch, NgClass, NgStyle — Built-in directives
• AsyncPipe, DatePipe, UpperCasePipe, JsonPipe — Built-in pipes
• Location, PlatformLocation — URL and platform utilities

Platform Browser (@angular/platform-browser)

• BrowserModule — Core module for browser applications
• DomSanitizer — Sanitizes HTML, URLs, and styles for safe binding
• TransferState — Passes data from server to client

Platform Browser Dynamic (@angular/platform-browser-dynamic)

• platformBrowserDynamic — JIT bootstrapping for development
• JitCompilerFactory — JIT compiler configuration