Junior Angular Interview Questions

A component is the fundamental UI building block in Angular, connecting HTML (view), TypeScript (logic), and CSS (styles).

Responsibilities include rendering UI, handling events, managing local state, communicating with other components, data binding, and calling services.

Lifecycle hooks are special methods Angular calls during component creation, update, and destruction.

They help with initialization, loading data, reacting to input changes, accessing the DOM, and cleaning up resources.

NgModule groups components, directives, pipes, and services into a logical unit.

It manages imports, exports, providers, compilation context, and enables lazy loading.

Dependency Injection provides required objects (services) to classes instead of creating them internally.

Angular uses injectors, providers, and a hierarchical DI system. Constructor injection is the most common mechanism.

Component-level services create a new instance for each component instance.

Module-level services provide a shared instance across the entire module/application.

Structural directives change the DOM structure (e.g., *ngIf, *ngFor).

Attribute directives change the appearance or behavior of an element (e.g., ngClass, ngStyle).

Change detection updates the UI when data changes. Angular checks component trees after async events using Zone.js.

Two strategies exist: Default (checks all components) and OnPush (checks only when needed).

Angular supports interpolation, property binding, event binding, and two-way binding.

Each type controls how data flows between component and template.

Content projection allows inserting external content into a component's template.

It enables reusable UI wrappers, flexible layouts, and component composition.

AOT compiles Angular templates during build time for faster startup, smaller bundles, earlier error detection, and better security.

AOT is the default for production builds in modern Angular.

Angular change detection is triggered by async events handled by Zone.js, such as timers, promises, user events, and HTTP calls.

Understanding these triggers helps avoid unnecessary re-renders, optimize performance, and decide when to use OnPush strategy.

Default Strategy: Angular checks all components, even if data has not changed.

OnPush Strategy: Angular checks only when input references change, observables emit, or events occur.

OnPush improves performance, especially in complex apps.

Pure Pipes: Run only when input changes, fast and cached.

Impure Pipes: Run on every change detection cycle, can slow performance.

Impure pipes are needed only when data mutates without reference change.

RxJS provides observables and operators for handling async programming in Angular.

It powers HTTP requests, forms, router events, websockets, and state management.

Cold Observables: Start producing values on subscription (e.g., HTTP calls).

Hot Observables: Produce values regardless of subscribers (e.g., events, websockets).

Cold = fresh execution per subscriber; Hot = shared execution.

Subject: No initial value; subscribers only receive future values.

BehaviorSubject: Has initial value and gives latest value to new subscribers.

ReplaySubject: Stores a buffer of values and replays them to new subscribers.

Module Federation allows multiple Angular applications to share modules or components at runtime.

It enables microfrontends, improves modularity, and supports independent deployments.

Zones track async tasks and trigger change detection. Disabling them is useful for high-performance apps that manually control UI updates.

Helps in real-time or graphics-heavy applications.

Tree-shaking removes unused code from the bundle.

It results in smaller builds, faster load times, and better performance.

ViewEncapsulation controls how component styles are scoped.

Modes: Emulated (default), ShadowDom, and None.

It prevents CSS conflicts and supports reusable component styling.