codejump
Academy

Angular

15 pages · about 85 min of reading

  1. 01Interpolation and Property Binding{{ }} renders text; [prop] sets a DOM property directly. The same distinction as textContent vs. a property assignment, and it decides which one a template needs.
  2. 02Control Flow: @if and @forAngular 17+ replaced *ngIf and *ngFor with built-in @if and @for blocks — faster, stricter about tracking, and no CommonModule import required.
  3. 03Event Binding and Custom Outputs(event)="handler($event)" binds a native DOM event; @Output() lets a component emit its own, typed the same way any other value in the app is typed.
  4. 04Signals: signal(), computed() and effect()signal() holds a value behind a getter/setter pair; computed() derives from it lazily; effect() reacts to it. Angular's answer to Vue's ref or a React hook.
  5. 05Two-Way Binding and Reactive Forms[(ngModel)] is sugar over a property and event bound together; reactive forms trade that convenience for FormControl, validators and explicit state.
  6. 06Template Refs, ViewChild and Outlets#ref names an element for the template; @ViewChild reaches the same element from the class. ng-template and ngTemplateOutlet turn a template into a value.
  7. 07Input, Output and Content Projection@Input()/@Output() pass data down and events up between components; <ng-content> lets a parent's markup render inside a child it doesn't control.
  8. 08Dependency Injection and Injection Tokensinject() asks Angular's container for a shared instance instead of constructing one privately. InjectionToken<T> does the same for values that aren't classes.
  9. 09Attribute Fallthrough and ngOnChangesA class or attribute a caller puts on a component's host element falls through by default; @HostBinding sets one from inside. ngOnChanges reports what changed.
  10. 10Lifecycle Hooks and Custom DirectivesngOnInit is where setup belongs, ngOnDestroy where it gets torn down; a custom attribute directive follows the same discipline for its own listeners.
  11. 11Services and Async State with SignalsA service is Angular's unit of shared, reusable logic — its composable — and signal() is how it holds async state a component can read reactively.
  12. 12Derived State and Strongly-Typed Inputscomputed() replaces a hand-managed boolean that tracks the same thing state already implies; a discriminated-union @Input() lets the compiler enforce every branch.
  13. 13Generic Pipes and Type GuardsA pipe that stays generic over its input works for any array shape; a runtime type guard is the only thing standing between an untyped API response and a crash.
  14. 14OnPush Change Detection and model()OnPush skips a subtree until an @Input() reference actually changes; model() gives a component a two-way custom binding without a separate @Output() wiring.
  15. 15Compound Components and Dynamic OutletsA compound component's parts coordinate through a shared, injected service instead of local state; NgComponentOutlet renders whichever component a mapping picks at runtime.