Angular Concepts Review - DI, Routing, Forms, RxJS, TypeScript, Web/REST

A set of practice flashcards covering key Angular concepts including DI, modules, routing, forms, RxJS, TypeScript, and REST/WebSocket topics.

What is Dependency Injection in Angular?

A design pattern where a class receives its dependencies from external sources rather than creating them itself. By using @Injectable({ providedIn: 'root' }) or adding it to a module/component providers array. 'root' creates a singleton service across the app; component providers create a new instance for that component's scope.

How do you provide a service in Angular?

By using @Injectable({ providedIn: 'root' }) or by listing the service in a module or component's providers array.

Difference between providedIn: 'root' and component providers?

'root' makes the service a singleton shared across the app; component providers create a new instance scoped to that component and its children.

Purpose of @Injectable() in Angular?

Marks a class as injectable and allows Angular to inject dependencies into it.

What is an injector tree?

A hierarchy of injectors in Angular used to resolve dependencies starting from the closest injector upward.

Can services have dependencies themselves?

Yes, services can have dependencies injected via their constructor, which Angular resolves recursively.

What is useClass in DI?

Tells Angular to provide a different class when a dependency is requested.

What is useValue in DI?

Tells Angular to inject a fixed value instead of creating an instance.

What is useFactory in DI?

Allows you to provide a dependency using a factory function for dynamic creation.

What is useExisting in DI?

Creates an alias to use an existing provider rather than creating a new instance.

What are Angular modules?

Containers for a group of components, directives, pipes, and services.

What is a component in Angular?

A building block of Angular applications controlling a view via HTML, CSS, and TypeScript.

Purpose of NgModule decorator?

Defines metadata for an Angular module, including declarations, imports, exports, and providers.

What is a directive in Angular?

A class that adds behavior to elements in Angular templates.

What is a pipe in Angular?

A class for transforming displayed values in templates.

What is the difference between pure and impure pipes?

Pure pipes execute only when inputs change; impure pipes run every change detection cycle.

What are Angular lifecycle hooks?

Special methods like ngOnInit, ngOnChanges, ngOnDestroy used at specific component lifecycle stages.

What is Ahead-of-Time (AOT) compilation?

Compiling Angular templates at build time for faster rendering.

What is ViewEncapsulation?

Defines how CSS styles are scoped to components.

What are Angular zones?

Execution contexts that help Angular detect and react to asynchronous operations.

What is the Angular Router?

A module that enables navigation between views in a single-page application.

How to define a route in Angular?

By adding an object with path and component to the RouterModule.forRoot() or forChild().

What is a wildcard route?

A route with path '**' that matches any undefined paths.

How to create route parameters?

By defining a route path with :paramName and accessing it via ActivatedRoute.

What is lazy loading in Angular routing?

Loading feature modules only when their route is accessed.

What is a resolver in Angular routing?

A service that fetches data before activating a route.

How to navigate programmatically in Angular?

By injecting Router and calling router.navigate().

What is routerLinkActive?

A directive that adds a CSS class to an element when the linked route is active.

Difference between forRoot and forChild in RouterModule?

forRoot configures the main application routes; forChild configures feature module routes.

How to protect routes in Angular?

By using route guards like CanActivate, CanDeactivate, etc.

What is an Angular Guard?

A service that controls navigation based on logic, e.g., AuthGuard.

What is CanActivate?

A guard that decides if a route can be activated.

What is CanDeactivate?

A guard that decides if a route can be exited.

What is Resolve in routing?

A guard that pre-fetches data before a route activates.

What is an HTTP interceptor?

A service that intercepts HTTP requests/responses to modify or handle them globally.

How to implement an HTTP interceptor?

By creating a class implementing HttpInterceptor and adding it to HTTP_INTERCEPTORS providers.

Use cases for HTTP interceptors?

Adding authentication tokens, logging, error handling.

Difference between intercepting request and response?

Requests are modified before being sent; responses after being received.

Can interceptors be chained?

Yes, multiple interceptors run in the order they're provided.

How to skip an interceptor for specific requests?

By checking request URL or adding custom headers and conditionally skipping logic.

Difference between template-driven and reactive forms?

Template-driven forms rely on Angular directives; reactive forms use explicit form control objects.

What is FormControl?

A class that tracks the value and validation status of an individual form input.

What is FormGroup?

A group of FormControls that can be validated together.

What is FormBuilder?

A service that simplifies creating FormControl and FormGroup instances.

What are form validators?

Functions that check form control values for validity.

What is async validator?

A validator function that returns a Promise or Observable.

How to display form validation errors?

By checking control.errors and conditionally rendering messages.

What is patchValue vs setValue?

setValue requires all controls; patchValue updates only specified controls.

What is valueChanges in forms?

An Observable that emits whenever the form control's value changes.

What is statusChanges in forms?

An Observable that emits whenever the validation status changes.

What is an Observable in Angular?

An asynchronous data stream that can emit multiple values over time.

What is a Subject in RxJS?

An Observable that can multicast to multiple observers.

Difference between Subject and BehaviorSubject?

BehaviorSubject has an initial value and emits the last value to new subscribers.

What is a ReplaySubject?

An Observable that emits a specified number of previous values to new subscribers.

What is an AsyncSubject?

It emits only the last value upon completion.

What is an operator in RxJS?

A function that enables functional programming with Observables.

Difference between map and switchMap?

map transforms values; switchMap switches to a new Observable cancelling the previous one.

What is mergeMap?

Maps each value to an Observable and merges the results.

What is concatMap?

Maps values to Observables and subscribes to each sequentially.

What is exhaustMap?

Ignores new emissions until the current Observable completes.

Difference between interface and type in TypeScript?

Interfaces define contracts for objects; types can define unions, primitives, and complex types.

What are generics in TypeScript?

A way to create reusable code components that work with different types.

What is type inference?

The compiler automatically infers the type based on the value.

What is type assertion?

A way to tell the compiler to treat a value as a specific type.

Difference between unknown and any?

unknown is safer; it requires type checks before use.

What are enums in TypeScript?

A way to define named constants, numeric or string.

What is a union type?

A type that can be one of several types.

What is an intersection type?

A type that combines multiple types into one.

What is the difference between private, protected, and public?

Access modifiers that control visibility of class members.

What is a namespace in TypeScript?

A way to organize code into logical groups and avoid naming conflicts.

What is a closure in JavaScript?

A function that remembers the variables from its lexical scope even when executed outside that scope.

What is 'this' in JavaScript?

A keyword referring to the object that is currently executing the function.

What are arrow functions?

Functions with a concise syntax that do not have their own 'this'.

Difference between var, let, and const?

var is function-scoped; let and const are block-scoped; const cannot be reassigned.

What is hoisting in JavaScript?

The process where variable and function declarations are moved to the top of their scope.

What is event delegation?

Attaching an event listener to a parent to handle events from its children.

What are promises in JavaScript?

Objects representing eventual completion or failure of an asynchronous operation.

What is async/await?

Syntax for working with promises in a synchronous-like manner.

What is the spread operator?

A syntax to expand elements of an array/object.

What is destructuring?

A syntax for unpacking values from arrays or properties from objects.

What is Change Detection in Angular?

The process Angular uses to check and update the DOM when data changes.

Difference between default and OnPush change detection?

Default runs often; OnPush runs only when inputs change or events occur.

What is a custom structural directive?

A directive that changes the DOM layout, e.g., *ngIf.

How to optimize Angular performance?

Using OnPush, trackBy in ngFor, lazy loading, and avoiding unnecessary change detection.

What is trackBy in ngFor?

A function that helps Angular track items by a unique identifier to improve performance.

What is Angular Universal?

Server-side rendering for Angular apps.

What are service workers in Angular?

Scripts that enable offline support and caching for PWA functionality.

What is Ivy in Angular?

The default rendering engine introduced in Angular 9.

What is ViewChild in Angular?

A decorator to access a child component, directive, or DOM element.

What is ContentChild in Angular?

A decorator to access projected content inside a component.

What is the difference between Renderer2 and direct DOM manipulation?

Renderer2 is Angular's safe way to manipulate DOM, ensuring compatibility with different environments.

What is a template reference variable?

A variable in a template that refers to a DOM element or directive instance.

What is ngZone in Angular?

A service to run code inside or outside Angular's change detection.

What are dynamic components in Angular?

Components created and loaded at runtime using ComponentFactoryResolver or ViewContainerRef.

What is differential loading in Angular?

A way to load different bundles for modern and legacy browsers.

What is internationalization (i18n) in Angular?

The process of making the app adaptable to different languages and locales.

What is a singleton service?

A service that has only one instance throughout the application.

What is a multi-provider in Angular DI?

A provider configuration that allows multiple values for the same token.

What are tokens in Angular DI?

Identifiers used to locate dependencies in the injector.

What is platformBrowserDynamic in Angular?

A function that bootstraps an Angular app in the browser at runtime.