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

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

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

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

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

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

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