Angular Core Concepts
🧱 Core Building Blocks
- 1. Components
UI + logic units (TypeScript + HTML + CSS)
Decorated with @Component
Lifecycle hooks: ngOnInit, ngOnDestroy, etc.
- 2. Modules
Group related components, directives, pipes
Decorated with @NgModule
Supports lazy loading and feature encapsulation
- 3. Templates
HTML with Angular syntax
Data binding: {{ }}, [property], (event), [(ngModel)]
- 4. Directives
Structural: *ngIf, *ngFor
Attribute: [ngClass], [ngStyle]
Custom: Extend behavior of DOM elements
- 5. Pipes
Transform data in templates
Built-in: date, currency, uppercase
Custom pipes via @Pipe
🔄 Data & State Management
- 6. Services
Singleton logic containers
Injected via Dependency Injection (DI)
- 7. Dependency Injection (DI)
Hierarchical injector tree
@Injectable({ providedIn: 'root' })
- 8. RxJS & Observables
Reactive programming
Operators: map, switchMap, mergeMap, debounceTime
- 9. Signal API (Angular 16+)
Lightweight reactive primitives
Replace BehaviorSubject for local state
🌐 Routing & Navigation
- 10. RouterModule
Define routes with path, component, loadChildren
Guards: CanActivate, CanDeactivate, Resolve
Lazy loading via dynamic import()
- 11. Route Parameters & Query Params
Access via ActivatedRoute
Use snapshot or observable pattern
🧠 Advanced Concepts
- 12. Standalone Components (Angular 14+)
No need for NgModule
Simplifies modular architecture
- 13. Zone-less Change Detection
Improves performance
Use signals or manual ChangeDetectorRef
- 14. Change Detection Strategies
Default: checks all bindings
OnPush: checks only on input change or event
- 15. Forms
Template-driven: FormsModule
Reactive: FormBuilder, FormGroup, Validators
🧰 Tooling & CLI
- 16. Angular CLI
ng new, ng serve, ng build, ng generate
Configuration via angular.json
- 17. Testing
Unit tests: TestBed, ComponentFixture
E2E tests: Protractor or Cypress
🛡️ Security & Optimization
- 18. AOT vs JIT Compilation
AOT: faster startup, smaller bundles
JIT: faster builds, ideal for development
- 19. Tree Shaking & Lazy Loading
Removes unused code
Improves bundle size and performance
- 20. i18n (Internationalization)
Translation files (.xlf, .json)
i18n attribute in templates
🧩 Miscellaneous
- 21. Lifecycle Hooks
ngOnInit, ngAfterViewInit, ngOnChanges, etc.
- 22. Custom Elements / Web Components
Angular elements for embedding in non-Angular apps
- 23. SSR (Server-Side Rendering)
Angular Universal
Improves SEO and initial load
- 24. Animations
@angular/animations
Triggered via @trigger, state, transition