Back to Home
Angular logoAngular INTERMEDIATE

Angular Essentials

Complete Angular framework guide with TypeScript, components, services, RxJS, and modern Angular features

18 min read
angulartypescriptrxjsspaframeworkcomponentsreactive

Setup & CLI

Angular installation and CLI commands

Installation & Setup

Setting up Angular development environment

typescript
💡 Use ng new with --strict for stricter TypeScript settings
⚡ ng serve automatically reloads on file changes
📌 Production builds include tree-shaking and minification
🔥 Use ng update to keep Angular versions in sync

Angular CLI Commands

Essential Angular CLI commands for development

typescript
💡 Use --dry-run flag to preview changes without creating files
⚡ Shortcuts: g (generate), c (component), s (service), m (module)
📌 Use --skip-tests to skip test file generation
🔥 Standalone components don't need module declarations

Components

Angular components and lifecycle

Component Basics

Creating and using Angular components

typescript
💡 Use OnPush change detection for better performance
⚡ Standalone components simplify module management
📌 Component selector should have app- prefix
🔥 Keep templates and logic simple and focused

Component Communication

Input, Output, and component interaction

typescript
💡 Use @Input for data flow down, @Output for events up
⚡ ViewChild is resolved after ngAfterViewInit
📌 Two-way binding uses pattern: [(prop)]="value"
🔥 Content projection allows flexible component composition

ViewChild & ContentChild

Accessing child components and elements

typescript
💡 Use static: true for ViewChild if you need it in ngOnInit
⚡ ViewChildren returns a QueryList that updates automatically
📌 ContentChild queries projected content from ng-content
🔥 Access child components after ngAfterViewInit lifecycle hook

Lifecycle Hooks

Component lifecycle methods

typescript
💡 Use ngOnInit for initialization, not constructor
⚡ Always unsubscribe in ngOnDestroy to prevent memory leaks
📌 ngAfterViewInit is safe for DOM manipulation
🔥 Avoid heavy operations in frequently called hooks

Templates & Directives

Template syntax and built-in directives

Template Syntax

Data binding and template expressions

typescript
💡 Use safe navigation (?) to avoid null reference errors
⚡ Prefer property binding [prop] over string interpolation
📌 Template reference variables provide direct access to elements
🔥 ng-container groups elements without adding DOM nodes

Built-in Directives

Structural and attribute directives

typescript
💡 Use trackBy with ngFor for better performance
⚡ ng-container avoids extra DOM elements
📌 Structural directives can't be combined on same element
🔥 Angular 17+ control flow (@if, @for) is more efficient

Services & DI

Services and dependency injection

Services

Creating and using Angular services

typescript
💡 Use providedIn: 'root' for singleton services
⚡ Handle errors gracefully with catchError
📌 BehaviorSubject for state management
🔥 Always unsubscribe to prevent memory leaks

Dependency Injection

DI patterns and providers

typescript
💡 Use InjectionToken for non-class dependencies
⚡ providedIn: 'root' enables tree-shaking
📌 Hierarchical DI allows different instances at different levels
🔥 Use factories for complex initialization logic

Routing

Angular router configuration and navigation

Route Configuration

Setting up routes and navigation

typescript
💡 Use lazy loading for large feature modules
⚡ PreloadAllModules strategy improves perceived performance
📌 Order matters - wildcard route must be last
🔥 Use routerLinkActive for navigation highlighting

Guards & Resolvers

Route guards and data resolvers

typescript
💡 Use guards to control access to routes
⚡ Resolvers ensure data is loaded before component
📌 Functional guards are simpler for basic checks
🔥 CanDeactivate prevents accidental data loss

Forms

Template-driven and reactive forms

Template-Driven Forms

Forms with ngModel and template validation

typescript
💡 Template-driven forms are simpler for basic forms
⚡ Use template reference variables for validation
📌 ngModelGroup creates nested form groups
🔥 Import FormsModule to use template-driven forms

Reactive Forms

Forms with FormControl and validators

typescript
💡 Reactive forms provide more control and testability
⚡ Use FormBuilder for cleaner syntax
📌 Async validators for server-side validation
🔥 FormArray for dynamic form fields

HTTP & Observables

HTTP client and RxJS observables

HTTP Client

Making HTTP requests with HttpClient

typescript
💡 Always handle errors with catchError operator
⚡ Use interceptors for cross-cutting concerns
📌 Set responseType for non-JSON responses
🔥 Use reportProgress for file upload progress

RxJS Observables

Working with observables and operators

typescript
💡 Use appropriate flattening operator (switchMap for searches)
⚡ takeUntil pattern prevents memory leaks
📌 BehaviorSubject for state management
🔥 shareReplay for caching HTTP requests

Advanced Features

Pipes, directives, and performance

Pipes & Directives

Custom pipes and directives

typescript
💡 Keep pipes pure for better performance
⚡ Use trackBy in ngFor for large lists
📌 Directives add behavior to existing elements
🔥 OnPush change detection optimizes performance

Signals (Angular 16+)

Reactive primitive for state management

Signal Basics

Creating and using signals for reactive state

typescript
💡 Signals provide fine-grained reactivity without Zone.js
⚡ Computed signals are memoized and only recalculate when dependencies change
📌 Effects run automatically when their signal dependencies change
🔥 Use signal inputs for better performance than traditional @Input

Animations

Built-in Angular animation API

Animation Basics

Creating animations with Angular animations API

typescript
💡 Use :enter and :leave for elements being added/removed from DOM
⚡ Stagger animations for lists create smooth sequential effects
📌 Always import BrowserAnimationsModule in your app module
🔥 Use NoopAnimationsModule for testing to disable animations

Testing

Built-in testing with Karma, Jasmine, and TestBed

Component Testing

Testing Angular components with TestBed

typescript
💡 Use TestBed.configureTestingModule to set up test environment
⚡ Mock external dependencies for isolated unit tests
📌 Use fixture.detectChanges() to trigger change detection
🔥 HttpTestingController helps test HTTP requests without actual calls

Performance

Built-in performance optimization features

Performance Optimization

OnPush strategy, trackBy, and lazy loading

typescript
💡 OnPush strategy skips change detection if inputs haven't changed
⚡ Always use trackBy with ngFor for large lists
📌 Lazy load modules to reduce initial bundle size
🔥 Use virtual scrolling for large lists (CDK required)

Security

Built-in security features and sanitization

Security & Sanitization

XSS protection and content sanitization

typescript
💡 Angular automatically sanitizes innerHTML to prevent XSS
⚡ Use DomSanitizer.bypassSecurityTrust* only for trusted content
📌 Always validate and sanitize user input on both client and server
🔥 Implement CSP headers to prevent unauthorized script execution

Accessibility

Built-in accessibility features and ARIA support

Accessibility (A11y)

ARIA attributes and CDK A11y utilities

typescript
💡 Always use semantic HTML elements when possible
⚡ CDK A11y provides utilities for focus management and live announcements
📌 Use ARIA attributes to provide context for screen readers
🔥 Test with keyboard navigation and screen readers

i18n

Built-in internationalization support

Internationalization (i18n)

Built-in i18n for multi-language support

typescript
💡 Use i18n attribute to mark text for translation
⚡ Angular CLI extracts and manages translation files automatically
📌 Build separate bundles for each locale for best performance
🔥 Use ICU message format for complex pluralization and selection