Angular

input(default) and input.required<T>() declare inputs as read-only InputSignal fields you read by calling them, and a missing required binding is a compile error. @Input() marks a plain, reassignable property and remains fully supported.

The constructor runs when Angular creates the instance, before any parent bindings are applied, so it should only inject dependencies and register setup. ngOnInit runs once after the first input values are set, so input-dependent initialisation belongs there.

The imports array lists the components, directives, pipes and NgModules a standalone component's template may use. A missing element-selector child fails the build with NG8001; a missing attribute-selector child is silently never created.

model() declares a writable signal input: the parent can bind a value in, the child can set() or update() it, and Angular adds a <name>Change output so a [( )] binding to a signal or plain property stays in sync.

The child declares rated = output<number>() or @Output() rated = new EventEmitter<number>() and calls rated.emit(value). The parent binds (rated)="save($event)", where $event is exactly the emitted value, not a DOM event.

Use the built-in @if (cond) { } @else if (other) { } @else { } blocks. They replace *ngIf="cond; else tpl" plus an <ng-template #tpl>, need no import, and *ngIf has been deprecated since v20.

Parentheses around an event name make Angular listen for that event and run the quoted template statement each time it fires. $event is the native DOM event object, or the value a component output emitted.

Interpolation evaluates its expression against the component instance, with this implied, plus any template variables in scope, converts the result to a string and writes it as text. null and undefined render as an empty string; an object renders through String().

Angular's @for requires track so the runtime can match each item to its existing row view by key. Track a stable unique field like item.id, use $index only for static lists, and the item itself only as a last resort.

[value] writes the element's DOM property, or a matching component or directive input, and is checked at compile time. [attr.colspan] calls setAttribute with the stringified value and removes the attribute for null or undefined; use it when no matching property exists.

An Angular attribute directive is a class decorated with @Directive and an attribute selector such as [appHighlight]; it adds behaviour to an existing element or component. Import it into the using component, react to host events and set styles via host bindings or ElementRef.

Apply the currency, date and number pipes with |, e.g. amount | currency:'EUR', issuedOn | date:'longDate', qty | number:'1.0-0'. Arguments follow colons in order, and chained pipes run left to right.

Decorate a class with @Pipe({ name: 'truncate' }), implement PipeTransform's transform(value, ...args), and add the class to the standalone component's imports. Extra transform parameters become colon-separated arguments, as in text | truncate: 40.

<ng-template> declares a fragment that Angular compiles but renders only when an outlet or code stamps it; <ng-container> renders its children immediately without adding a wrapper element. Neither becomes an HTML element itself; each is represented by a comment node.

The Angular compiler wraps the element in an ng-template that carries only the structural directive and its microsyntax bindings; the directive then renders that template, or not, through TemplateRef and ViewContainerRef.

effect() runs a side-effect callback that re-runs whenever a signal it read last time changes. It must be created in an injection context or given an injector, and it first runs asynchronously during the next change detection, not when created.

linkedSignal() is a writable signal whose value is initialised and reset by a computation. You can set() it like a signal(), but whenever the signals its computation reads change, it recomputes and replaces whatever was set.

resource() pairs a reactive params function with an async loader: whenever the signals read in params produce a new value, Angular calls the loader with it and exposes the result through signals such as value(), status() and isLoading().

computed() is lazy and memoized: its function runs on first read and its result is cached until a signal it read changes. A template getter or method reruns on every check of that view, and nothing caches its result.

signal(initialValue) returns a WritableSignal: a getter function you call, such as qty(), to read the value. set(value) replaces the value outright, while update(fn) computes the next value from the current one and must return it.

Angular's async pipe subscribes to the Observable or Promise when the binding is first evaluated, returns its latest value, calls markForCheck on each asynchronous emission, swaps subscriptions if the reference changes, and unsubscribes when the view is destroyed.

A private BehaviorSubject means only the service's own methods can emit new state, so every change goes through one path; asObservable() gives consumers an Observable backed by the subject that has no next(), error() or complete() to call.

Angular's toSignal() subscribes to the Observable as soon as it is called, stores each emission in a read-only signal the template reads with (), and unsubscribes when the calling component's or service's DestroyRef fires.

HttpClient methods return cold Observables: the call only describes the request, and each subscription runs the interceptor chain and backend again, sending a new request. With the default observe: 'body' each run emits one body and completes.

Angular's takeUntilDestroyed() pipes the source through takeUntil with a notifier fired by a DestroyRef's onDestroy callback, so the stream completes when the component, directive or injector is destroyed; without an argument it must run in an injection context.

NG0100 means a template binding produced a different value in Angular's dev-mode verification pass than in the change detection pass just before it. The extra pass runs only in development builds, so production shows the stale value silently instead of throwing.

markForCheck() only marks the view and its ancestors dirty and notifies the scheduler, so the next change-detection pass refreshes them; detectChanges() synchronously checks this view and its descendants right now, without touching ancestors.

An Eager component is refreshed every time a change detection pass reaches it; an OnPush component is refreshed only when its view has been marked dirty. Since Angular 22, a component that omits changeDetection is OnPush.

zone.js patches async browser APIs such as timers, promises and event listeners, so NgZone sees each callback run in the Angular zone; when its microtask queue drains, NgZone emits onMicrotaskEmpty and Angular calls ApplicationRef.tick().

Since v21, Angular schedules change detection from its own notifications (template-read signal writes, markForCheck, bound listeners, setInput) instead of zone.js patching browser APIs. Dropping zone.js means fewer needless checks, a smaller bundle, faster startup and readable stack traces.

Both resolve dependencies from the same injector in the same way. inject() is called in a field initializer or constructor, giving better type inference, no super() forwarding and use in plain functions; Angular's style guide prefers it.

An Angular provider pairs a token with a recipe: useClass instantiates a class, useValue returns a fixed value untouched, useFactory returns what a function builds, and useExisting aliases another token. A bare class is shorthand for useClass of itself.

providedIn: 'root' gives one application-wide instance, created lazily on first injection and kept until the app is destroyed. A component's providers array creates a separate instance for each component instance, visible to its subtree and destroyed with it.

TypeScript interfaces are erased at compile time, so there is nothing at runtime for the injector to use as a key. An InjectionToken<T> is a real object that serves as that key, and its type parameter makes inject() return T.

An injection context exists while Angular creates a DI-managed instance (field initializers, constructor), inside provider and InjectionToken factories, and in functions the framework runs in context, such as guards. ngOnInit runs after construction, when no context is active, so inject() throws NG0203.

Angular's default ErrorHandler only logs the error with console.error. To replace it, write a class with a handleError(error) method and register { provide: ErrorHandler, useClass: MyHandler } in the application's providers.

provideAppInitializer registers a function Angular runs during bootstrap, before the root component is created; if it returns a Promise or Observable, startup waits for it. It replaced the APP_INITIALIZER multi-provider token, deprecated since v19.

declarations lists the non-standalone components, directives and pipes a module owns; imports brings in what its templates use; exports shares declarables with importers; providers registers services; bootstrap names the root component bootstrapModule renders.

bootstrapApplication(App, appConfig) in main.ts renders a standalone root component and builds the root injector from ApplicationConfig, whose only field is a providers array of plain providers and provideX() functions. It returns a Promise<ApplicationRef>.

Errors thrown in code Angular runs for you — constructors, lifecycle hooks, template bindings, template event listeners, async pipe sources, bootstrap — reach ErrorHandler. Errors you catch, errors exposed as state like resource().error, and free async errors without global listeners do not.

Register a Routes array with provideRouter: 'posts', 'posts/:slug' and a final '**' route for the 404 page. Order matters: the router uses the first route that matches, so the wildcard goes last.

Show the bar while Router.currentNavigation() is non-null, or start it on NavigationStart and stop it on NavigationEnd, NavigationCancel or NavigationError. Stopping only on NavigationEnd leaves it running after cancelled or failed navigations.

Write a CanActivateFn that injects the auth service, returns true for admins and returns a UrlTree (router.createUrlTree(['/login'])) or a RedirectCommand for everyone else, then list it in the route's canActivate array.

loadComponent takes a function returning import() of one standalone component; loadChildren returns a module whose export is a Routes array. When the file uses export default, the .then(m => m.X) step can be dropped.

A routerLink string is one navigation command; the array form lists segments so IDs and matrix params slot in. A leading '/' starts at the root, no prefix or './' appends to the current route, '../' climbs a level.

FormControl holds one value, FormGroup holds named child controls, and FormArray holds an indexed list; all extend AbstractControl and nest into a tree built in the class. The template binds it with [formGroup], formControlName, formGroupName and formArrayName from ReactiveFormsModule.

The data lives in a writable signal; form(model, schema) returns a FieldTree mirroring it; the schema runs once, binding rules like required() to paths; [formField] two-way binds an input to a field, whose state you read by calling it.

Template-driven forms let ngModel and NgForm directives build the FormControl tree implicitly from the markup, bound to plain component properties; reactive forms build that tree explicitly in the class. Template-driven fits small, static forms such as a newsletter sign-up.

Calling reset() on a plain FormControl sets its value to null, so Angular adds null to the inferred type. Passing {nonNullable: true} makes reset() return to the initial value instead, and the type becomes FormControl<string>.

Angular's built-in validators are functions passed to a control, either as the second argument or in the validators option. Each failing validator adds a key to control.errors, which is null when the control is valid.

An HttpInterceptorFn receives the outgoing HttpRequest and a next function. Because HttpRequest is immutable, it builds a copy with req.clone({ setHeaders: { Authorization: 'Bearer ...' } }) and returns next(copy), reading the token through inject() and skipping URLs outside its own API.

HttpClient methods return cold Observables: building one sends nothing, every subscription sends its own request, and unsubscribing before the response arrives aborts it. A method that only returns the Observable stays silent until something subscribes.

httpResource() tracks the signals its request function reads and sends the request eagerly, then again whenever one of them changes, cancelling any pending request. Returning undefined keeps it idle. It exposes value, status, error, isLoading, headers and statusCode as signals.

Since Angular 21, HttpClient is provided in root, so inject(HttpClient) works with no setup. provideHttpClient() in the application providers is still how you add features: withInterceptors, withInterceptorsFromDi, withXsrfConfiguration or withNoXsrfProtection, withXhr and withRequestsMadeViaParent.

All three reach the error channel as an HttpErrorResponse. A 404 keeps status 404 and the error body in error; status 0 means no HTTP response reached the app (offline, CORS block, timeout); an unparseable 200 keeps status 200 and a parsing message.

provideClientHydration() makes Angular reuse the server-rendered DOM instead of discarding it and rendering again. It must be in the server bootstrap as well as the client, or no hydration data is sent.

During SSR the component's constructor runs in Node, where window, localStorage and navigator do not exist, so the read throws. Move browser work into afterNextRender, reach the document through the DOCUMENT token, or guard browser-only logic with isPlatformBrowser(PLATFORM_ID).

Give the route RenderMode.Prerender in the server routes passed to provideServerRendering(withRoutes(...)). At build time Angular renders it once and writes a static index.html for that path, which is served as-is to every visitor.

Each ServerRoute passed to withRoutes() sets a renderMode: Server renders HTML on every request, Prerender renders it once at build time, and Client returns the unrendered shell so the browser renders the page.

Angular's HTTP transfer cache records eligible HttpClient responses made during the server render, serializes them into the HTML, and replays them in the browser during hydration, so the same GET or HEAD request is not sent twice.

In Angular, @placeholder shows before the @defer trigger fires, @loading replaces it while the deferred chunk downloads, and @error shows if that download fails. All three are optional, and their own dependencies are loaded eagerly.

An Angular @defer block loads its content when an on trigger fires (idle, viewport, interaction, hover, immediate or timer) or a when condition turns truthy. With no trigger written, it defaults to on idle.

Angular's NgOptimizedImage takes over an img tagged with ngSrc: it sets loading, fetchpriority and decoding, builds src and srcset through a loader, and runs dev checks. width and height are required, or fill, so the browser reserves space and avoids layout shift.

Angular re-evaluates every binding in a view each time it checks that view, so a template method runs on every check rather than only when its inputs change; a slow or per-row method multiplies that cost.

Angular defers a dependency only if it is standalone and nothing else in the same file references it as a value. A reference outside the block, a viewChild query, a non-standalone class or a barrel import keeps it eager.

Interpolation writes the string as text, so tags appear literally and nothing runs. [innerHTML] parses it as HTML, but Angular first sanitizes it in the HTML security context, dropping scripts and event-handler attributes and neutralizing javascript: URLs.

It returns a SafeResourceUrl: a wrapper around the unchanged string, branded for the resource URL context, that bindings unwrap without sanitizing. A bypass is justified only for a value you built from trusted parts that Angular would otherwise block.

A built-in interceptor copies the XSRF-TOKEN cookie into an X-XSRF-TOKEN header on same-origin requests other than GET and HEAD. The server must set that script-readable cookie and reject state-changing requests whose header is missing or does not match.

AOT compiles templates into JavaScript at build time, so the browser only runs ordinary bundled code. The JIT compiler generates template code in the browser and evaluates it with eval or new Function, which a script-src without 'unsafe-eval' blocks.

Pass withXsrfConfiguration({cookieName, headerName}) to provideHttpClient to match your backend's names, or withNoXsrfProtection() to remove the interceptor. Rename when the backend or a shared domain needs it; disable only when another defence, such as header-sent bearer tokens, makes it unnecessary.

LOCALE_ID names the active locale; the date, number, currency and percent pipes and ICU plural rules read it together with that locale's CLDR data. A --localize build sets both per locale; otherwise you provide LOCALE_ID and register the data yourself.

Template text gets the i18n attribute on its element, an attribute value gets i18n-<attribute> (for example i18n-title), and strings in TypeScript use the $localize tagged template literal. <ng-container i18n> marks text without adding an element.

The CLI compiles the app once, then inlines each locale's translations into a separate copy with its own directory, base href, html lang, LOCALE_ID and locale data. A server or Angular SSR redirects the root to the best-matching locale sub-path.

Inside i18n-marked text, write {count, plural, =0 {...} =1 {...} other {...}} for counts and {gender, select, female {...} male {...} other {...}} for string choices. Plural categories follow the locale's rules, other is the fallback, and clauses nest.

A generated ID hashes the message text, placeholders included, plus its meaning, so any wording, markup or meaning change creates a new ID and orphans the old translation. Custom @@ids stay stable but can silently go stale.

Put animate.enter="toast-in" and animate.leave="toast-out" on the toast element inside @if. Angular adds the enter class when the element is inserted and removes it afterwards; on removal it adds the leave class and keeps the element until that animation ends.

trigger() names an animation bound in the template as [@name]; state() pairs a state value with the style() it rests in; transition() matches a change such as 'open <=> closed' and runs animate() steps. It needs provideAnimationsAsync() or an equivalent provider.

withViewTransitions() makes the router activate and deactivate routes inside document.startViewTransition, so the browser animates from a snapshot of the old page to the new one. Without View Transitions support, the router skips it and navigates normally.

Bind (animate.leave)="fn($event)"; the handler gets an AnimationCallbackEvent with target and animationComplete(). Call animationComplete() when your animation finishes. If you never do, Angular removes the element after MAX_ANIMATION_TIMEOUT, 4000 ms by default.

Angular waits for the longest animation or transition on the element, counting its delay, then removes the enter classes or the leaving element. If the classes start no animation, it removes them, or the element, on the next frame instead of waiting.

TestBed.createComponent returns a ComponentFixture: a handle exposing the component instance, its host element and a DebugElement tree. You let it render with await fixture.whenStable() or fixture.detectChanges(), then query nativeElement or debugElement.query(By.css(...)).

Since v21, new projects run ng test through the @angular/build:unit-test builder with Vitest in Node.js and jsdom; Karma with Jasmine is still supported, selectable with --test-runner=karma or the builder's runner option.

Add provideHttpClientTesting() to TestBed's providers, subscribe to the service call, then use HttpTestingController to expectOne the request, flush a canned body, assert the result, and call verify() so no unclaimed request remains.

Call TestBed.configureTestingModule with the standalone component and any modules it needs in imports and your service doubles in providers, then create it with TestBed.createComponent; a standalone component never goes in declarations.

Wrap the test in fakeAsync, type with dispatchEvent, tick to just under 300 ms and assert nothing was searched, then tick the last millisecond, call detectChanges and assert the request and the rendered results.

AoT compiles Angular templates into JavaScript during the build; JIT ships the Angular compiler and compiles in the browser at runtime. AoT is the default because it starts faster, ships less code and reports template errors at build time.

Angular DevTools adds an Angular tab showing the component and directive tree with editable properties, the injector hierarchy with providers, and the router tree. It needs a development build, because optimized production builds strip the debug hooks it uses to talk to Angular.

strictTemplates, set in angularCompilerOptions in tsconfig and on by default since Angular 22, makes the compiler type-check templates like TypeScript code: bindings against input types under strictNullChecks, typed $event and local references, and expressions inside embedded views.

Angular's AoT compiler replaces @Component with static fields: ɵfac, a factory that creates the instance, and ɵcmp, the definition holding the selector, inputs and a template function of Ivy instructions that builds the DOM once and refreshes bindings on each check.

In development mode Angular publishes window.ng. Select the component's host element, call ng.getComponent($0) to get its instance, and change a field. A signal's set() schedules an update by itself; a plain field needs ng.applyChanges(instance) to mark it for check and run change detection.

AngularJS (1.x) is a JavaScript framework built on controllers, $scope and a digest loop of watchers; Angular is a TypeScript rewrite built on components, hierarchical dependency injection and top-down change detection. AngularJS support ended in January 2022.

Angular's control-flow migration rewrites *ngIf, *ngFor and *ngSwitch into @if, @for and @switch and drops the now-unused directive imports. It leaves review work: identity tracking where no trackBy existed, kept ng-templates, CommonModule still imported, and templates it could not parse.

Since v22 Angular ships a major roughly every 12 months, with 4-6 minors in between. Each major is supported for about 24 months: 12 months active, then 12 months of LTS that only takes critical and security fixes.

Run the optional schematics after the version update, one feature folder at a time: control flow, then the three standalone modes, then inject(), then the signal input, output and query migrations, and self-closing tags last, testing between each.

Upgrade one major at a time, v20 to v21 then v21 to v22, because Angular's policy supports updates only within one major and ng update refuses multi-major jumps. v20's LTS ends 2026-11-28, so plan both hops before then.