Angular Interview Master

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is developed and maintained by Google a...

Key features include Component-based architecture, Two-way data binding, Dependency Injection, Templates, Directives, Pipes, Routing, and RxJS integra...

TypeScript is a superset of JavaScript that adds static typing. Angular is built with TypeScript, which provides better tooling, refactoring capabilit...

A component is the fundamental building block of an Angular application. It consists of a TypeScript class (logic), an HTML template (view), and CSS s...

A template is a form of HTML that tells Angular how to render the component's view. It uses special syntax like {{ }} for interpolation and [ ] for pr...

Data binding is a mechanism that allows communication between the component's class and its template. Types include Interpolation, Property Binding, E...

AngularJS is the 1.x version based on JavaScript. Angular (2+) is a complete rewrite based on TypeScript, featuring a component-based architecture, be...

Directives are markers on a DOM element that tell Angular to attach behavior to it. There are three types: Component Directives, Structural Directives...

An NgModule is a decorator that describes how the application parts fit together. It declares components, directives, and pipes, and imports other mod...

Dependency Injection (DI) is a design pattern where a class requests dependencies from external sources rather than creating them. Angular's DI system...

Pipes are simple functions used in templates to transform data for display. Examples include DatePipe, UpperCasePipe, and CurrencyPipe.

The async pipe automatically subscribes to an Observable or Promise and returns the latest value it has emitted. It also automatically unsubscribes wh...

Interpolation allows you to embed expressions into HTML templates using double curly braces {{ expression }}. Angular evaluates the expression and con...

Property binding [property]="value" allows you to set properties of HTML elements or directives. It is a one-way data binding from component to view.

Event binding (event)="handler()" allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Two-way data binding [(ngModel)]="property" combines property and event binding. Changes in the component update the view, and changes in the view upd...

A service is a class with a specific purpose (e.g., fetching data, logging). It is typically decorated with @Injectable() and shared across components...

It marks a class as available to be provided and injected as a dependency. The 'providedIn: root' property makes it a singleton across the app.

Angular provides hooks like ngOnInit, ngOnChanges, ngAfterViewInit, and ngOnDestroy to tap into key events in a component's lifecycle.

ngOnInit is a lifecycle hook called after Angular has initialized all data-bound properties. It is the best place for initialization logic (e.g., API ...

ngOnDestroy is a hook called just before Angular destroys the component. It is used for cleanup, such as unsubscribing from Observables and detaching ...

The Angular Command Line Interface (CLI) is a tool used to initialize, develop, scaffold, and maintain Angular applications directly from a command sh...

Use the command: ng generate component component-name (or ng g c component-name).

An SPA is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

main.ts is the entry point of the Angular application. It bootstraps the root module (usually AppModule) to start the app.

Polyfills are scripts that provide modern functionality on older browsers that do not natively support it.

A selector is a CSS selector that tells Angular where to instantiate a component in the HTML template. Example: selector: 'app-root'.

Bootstrapping is the process of initializing and launching the Angular application by loading the root module and root component.

@Input() allows a parent component to pass data to a child component.

@Output() allows a child component to emit events to its parent component, typically using an EventEmitter.

EventEmitter is a class used in Angular components to emit custom events that a parent component can listen to via event binding.

Structural directives change the DOM layout by adding or removing elements. Common examples are *ngIf (conditional) and *ngFor (looping).

Attribute directives change the appearance or behavior of an existing element. Examples include ngClass and ngStyle.

*ngIf removes/adds the element from the DOM entirely, while the 'hidden' property merely hides it via CSS (display: none), keeping it in the DOM.

index.html is the main HTML file that is served when someone visits your site. It contains the root component selector where the app is injected.

package.json lists the dependencies and scripts required for the project. It is used by npm or yarn to manage library versions.

angular.json is the configuration file for the Angular CLI. It defines build, test, and serve settings for the workspace.

The constructor is a standard TypeScript class method called when the class is instantiated. In Angular, it is primarily used for Dependency Injection...

The constructor is for DI; ngOnInit is for Angular-specific initialization. Inputs are not available in the constructor but are available in ngOnInit.

Use the HttpClient service provided in HttpClientModule. It returns Observables for handling asynchronous data.

An Observable is a stream of data that can be observed over time. It is part of the RxJS library and is used extensively in Angular for handling async...

The subscribe() method is used to listen to an Observable. The callback function provided to subscribe is executed whenever the Observable emits a new...

Errors can be handled using the catchError operator from RxJS or by providing an error callback to the subscribe() method.

A Promise is a JavaScript object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.

Observables are lazy, cancellable, and handle multiple values. Promises are eager, not cancellable, and handle only a single value.

Routing allows navigating between different views or components based on the URL in the browser's address bar.

The <router-outlet> is a directive that acts as a placeholder where Angular dynamically inserts the component matched by the current route.

routerLink is a directive used to link to different routes in an Angular application. It is preferred over 'href' because it prevents a full page relo...

An HTTP Interceptor is a service that can inspect or transform HTTP requests and responses globally before they reach the server or the app.

ViewEncapsulation determines whether the styles defined in a component will affect the whole application or just that specific component. Options incl...

Template-driven forms are easy to use but harder to test and scale (using ngModel). Reactive forms are more robust, scalable, and testable, offering s...

FormBuilder is a syntactic sugar service that provides convenient methods for generating instances of FormControl, FormGroup, and FormArray.

FormArray is a class that tracks the value and validity state of an array of FormControl, FormGroup, or FormArray instances. It is useful for dynamic ...

Angular DI is hierarchical. If a dependency isn't found in the component's injector, it looks up to parent components, then to the module/root level. ...

Guards are interfaces that can permit or deny navigation to a route. Common guards include CanActivate, CanDeactivate, Resolve, and CanMatch (modern r...

Lazy loading is a technique that loads NgModules only when they are needed (e.g., when a user navigates to a specific route), reducing initial bundle ...

Use the 'loadChildren' property in route configuration with an arrow function: loadChildren: () => import('./module-path').then(m => m.ModuleName).

The Resolve guard is used to fetch data before navigating to a route, ensuring the component has all necessary data ready when it's initialized.

NgZone is a wrapper around Zone.js that helps Angular detect asynchronous changes and trigger change detection. 'runOutsideAngular' can improve perfor...

Angular has two strategies: Default (checks everything on every event) and OnPush (only checks when Inputs change or an event occurs within the compon...

With OnPush, Angular only runs change detection if an @Input property reference changes, an event originated in the component, or change detection is ...

It is a service used to manually trigger change detection (detectChanges), detach from the change detection tree (detach), or mark for check (markForC...

A Subject is both an Observable and an Observer. It allows values to be multicasted to many Observers. It acts as a bridge between non-reactive code a...

A Subject doesn't have an initial value and only emits future values. A BehaviorSubject requires an initial value and emits the current value to new s...

A ReplaySubject 'replays' a specified number of previous values to new subscribers, even if they subscribe long after the values were emitted.

Content projection (using <ng-content>) allows a component to insert external content into its template. It helps create reusable wrapper components (...

@ViewChild is a decorator used to gain access to a child component, directive, or DOM element within its own template. @ViewChildren is for multiple r...

Similar to ViewChild, but used to access projected content (content inside <ng-content>) from the parent's template.

A library is an Angular project that cannot run on its own. It is compiled into a package that can be shared across multiple Angular applications.

Parent-to-child (@Input), Child-to-parent (@Output), Sibling components (shared service with Subject/Signals), or using a State Management library (Ng...

Components that are instantiated at runtime rather than being declared in a template. Use ViewContainerRef and ComponentFactoryResolver (deprecated) o...

trackBy is a function that returns a unique identifier for items in a list. It helps Angular optimize performance by only re-rendering items that have...

Use Lazy Loading, AOT compilation, tree-shaking, production builds (ng build --prod), and analyze bundles using webpack-bundle-analyzer.

JIT (Just-in-Time) compiles code in the browser. AOT (Ahead-of-Time) compiles code during the build process, resulting in faster rendering and smaller...

Tree-shaking is a build-time optimization that removes unused code from the final bundle, ensuring only the necessary parts of dependencies are includ...

Signals are a new reactive primitive that allows Angular to track change dependencies more granularly than Zone.js, leading to better performance and ...

WritableSignals (signal()) allow updating values via set() or update(). ComputedSignals (computed()) are read-only and derive values from other signal...

effect() is a function that runs whenever the signal values it depends on change. It is typically used for side effects like logging or DOM manipulati...

Standalone components allow creating components, directives, and pipes without an @NgModule. They simplify application structure and enable easier laz...

Use the 'bootstrapApplication' function in main.ts, passing the root standalone component directly instead of a module.

In standalone apps, instead of HttpClientModule, you use 'provideHttpClient()' in the application config providers array.

switchMap cancels the previous inner observable and starts a new one. mergeMap handles all inner observables concurrently.

exhaustMap ignores new inner observables while a current one is still running. Useful for preventing duplicate submissions (e.g., login buttons).

concatMap queues inner observables and runs them one by one in sequence, ensuring order is preserved.

A custom validator is a function that takes a FormControl and returns an error object (if invalid) or null (if valid).

An AsyncValidator returns a Promise or Observable that emits an error object or null. Used for server-side validation (e.g., checking if username exis...

@HostListener is a decorator that allows you to listen for events on the host element of a directive or component.

@HostBinding allows you to set properties (like styles or classes) on the host element of a directive or component.

An Angular workspace is a directory containing one or more projects (apps or libraries) managed by the same CLI configuration.

The 'provide' property allows you to map a token to a specific class (useClass), value (useValue), or factory function (useFactory).

An InjectionToken is used for DI when the dependency is not a class (e.g., a simple string, config object, or interface).

Setting 'multi: true' in a provider allows multiple providers to be registered for the same token, resulting in an array of instances (common for inte...

A TypeScript compiler feature that ensures all types used in templates are correctly defined and checked against the component class.

Full client-side hydration allows Angular to reuse the existing DOM rendered by Server Side Rendering (SSR) without flickering or full re-rendering.

Server-Side Rendering (SSR) renders pages on the server and sends fully formed HTML to the browser, improving SEO and initial load speed.

Memory leaks usually occur from unclosed subscriptions. Fix by using the async pipe, 'takeUntil', or unsubscribing in ngOnDestroy.

takeUntil is an RxJS operator used to automatically unsubscribe from an observable when a 'notifier' observable (usually a subject triggered in ngOnDe...

A browser extension for Chrome and Firefox that helps debug Angular apps by inspecting component hierarchies and change detection cycles.

Schematics are template-based code generators that are part of the Angular CLI. They are used for 'ng generate' and 'ng add'.

The 'ng update' command automatically updates your workspace and dependencies to the latest version, often running migration scripts automatically.

Zone.js 'monkey-patches' asynchronous APIs (setTimeout, addEventListener, Promise) to intercept their execution and notify Angular to run change detec...

Modular uses @NgModule as a container; Standalone eliminates the module, making components the unit of organization. Standalone simplifies tree-shakin...

NgRx provides Redux-inspired reactive state management. It solves complexity in large apps by using a single source of truth, immutable state, and cle...

Signals are optimized for UI-state synchronization (synchronous and glitch-free). RxJS is optimized for complex event streams and asynchronous operati...

An architectural style where a large app is split into small independent apps that are integrated at runtime, often using Module Federation (Webpack).

By using the @angular-architects/module-federation plugin, which configures Webpack to share modules and load remote entries dynamically.

Pipes can inject services like any other class. Use @Injectable if you need to provide the pipe as a service, or just inject dependencies in the const...

Angular offers PreloadAllModules or custom strategies (e.g., Quicklink) to load lazy modules in the background after the initial page load.

A v17 feature that allows declaratively loading parts of a template based on triggers like scroll, hover, or idle time, significantly improving LCP.

Using {@defer on viewport} tells Angular only to load and render the block when it enters the browser's viewport.

With Signals, Angular can track exactly what changed, allowing apps to run without Zone.js, leading to smaller bundle sizes and predictable performanc...

A service to sanitize values for use in HTML, preventing XSS. It helps trust specific parts of content using 'bypassSecurityTrustHtml'.

Angular's HttpClient provides built-in support for CSRF by reading a token from a cookie and sending it in a custom HTTP header.

ViewContainerRef represents a container where one or more views can be attached. It's the primary tool for custom directive logic and dynamic componen...

Renderer2 is an abstraction over the DOM that ensures your code works even if the app runs in a different environment (e.g., Web Worker, SSR).

CLI 'ng generate web-worker' creates a worker to run heavy CPU tasks on a separate thread, keeping the UI thread responsive.

Interceptors can use HttpContext to pass metadata (tokens) between the request origin and the interceptor for logic branching.

A class that determines if a component should be destroyed or cached and reused when a route changes (e.g., keeping search results alive).

Before v16, you used 'withServerTransition'. Now, you use 'provideClientHydration()' for the modern, non-destructive hydration.

Spectator is a popular wrapper around Angular testing that reduces boilerplate and makes tests more readable compared to standard TestBed.

An Angular Material concept now available to all, allowing you to interact with components in tests via an API that mimics user behavior.

Cypress is deeply integrated but has some limitations. Playwright is faster, supports multiple tabs, and is increasingly the standard for Angular E2E.

A way to run functions that use 'inject()' outside of constructors or factory phases, useful for functional utilities.

It allows the service to be tree-shaken if not used anywhere, optimizing the final production bundle.

Introduced a way to transform @Input values automatically (e.g., booleanAttribute, numberAttribute) before they reach the component class.

DI resolution modifiers. 'Self' limits to current injector; 'SkipSelf' starts from parent; 'Optional' returns null if missing; 'Host' stops at host el...

A function that allows referring to a class not yet defined. Crucial for circular dependencies or recursive component configurations.

Packaging Angular components as standard Web Components that can be used in any HTML page or framework (Vue, React).

TemplateRef is a blueprint (defined in <ng-template>). ViewRef is the live instance of that template in the DOM.

Used in CommonJS deployments for resolving relative URLs, now mostly obsolete in modern Webpack-based CLI builds.

A structural directive that allows showing different templates based on numerical value (localization support).

It works by optimizing the change detector's 'dirty' check. It relies on object immutability. If a property of an object changes but not the reference...

A utility to read a signal's value without creating a reactive dependency in a 'computed' or 'effect' function.

take(1) takes the first emission and completes. first() takes the first emission matching a predicate and throws an error if none match.

Saves the result of an API call to share with multiple subscribers. Danger: It can lead to memory leaks if 'refCount: true' isn't managed correctly.

Adds a CSS class to an element when its router link is currently active, helping with navigation highlights.

Allows having multiple side-by-side active routes by naming the router-outlets. Example: Dashboard and Chat popup simultaneously.

Custom logic to determine if a URL matches a route, allowing for complex URL patterns that static strings can't handle.

Configuring headers to restrict where scripts and resources can be loaded from. Angular supports CSP by avoiding eval() and inline scripts.

run() forces code back into the detection zone (used for 3rd party libs). runOutsideAngular() skips detection for high-freq events like 'mousemove'.

A pattern used to return a module along with its services, usually in 'forRoot()' methods (e.g., RouterModule.forRoot()).

Embedded Views are created from TemplateRef (<ng-template>). Host Views are created when a component is instantiated.

Using a component that references itself in its own template, often combined with *ngIf to stop the recursion.

A performance optimization that injects a static string value from the host element's attribute once, rather than tracking it via @Input.

A low-level service to track changes in objects or maps, useful when writing extremely complex custom directives.

Tracks changes in arrays/iterables. It's what *ngFor uses internally to know what added/removed/moved.

HTML, STYLE, SCRIPT, URL, and RESOURCE_URL are contexts that the sanitizer uses to apply different rules based on where data is injected.

In standalone apps, use 'provideAnimations()' or 'provideNoopAnimations()' in the application providers array to enable/disable animations.

Represents an instance of an Angular app on a page. Used to manually trigger tick() (full app check) or destroy the app.

Allows access to the component instance (change detection), location (DOM element), and injector of a dynamically created component.

Signals use .set() and .update().

const count = signal(0);
count.set(5);
count.update(v => v + 1);

Derived state from other signals.

const double = computed(() => count() * 2);

Use catchError from RxJS.

this.http.get('/api/data').pipe(
  catchError(err => of([]))
).subscribe(res => this.data = res);

FormGroup and Validators.

form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email])
});

@HostListener for events.

@Directive({ selector: '[appHover]' })
export class Hover {
  @HostListener('mouseenter') onEnter() { ... }
}

Implement PipeTransform.

transform(val: string): string {
  return val.split('').reverse().join('');
}

Prevents race conditions.

results$ = searchTerm$.pipe(
  switchMap(term => this.service.search(term))
);

Use ViewContainerRef and createComponent.

this.vcr.createComponent(MyComponent);

Modern Angular uses functions for guards.

export const authGuard: CanActivateFn = (route, state) => {
  return inject(AuthService).isLoggedIn();
};

forkJoin emits when all complete.

forkJoin({ a: obs1, b: obs2 }).subscribe(data => ...);

Use debounceTime operator.

input$.pipe(debounceTime(300), distinctUntilChanged());

providedIn: 'root'.

@Injectable({ providedIn: 'root' })

Use 'as' in *ngIf.

<div *ngIf="data$ | async as data"> {{data.name}} </div>

Function returning ValidatorFn.

function myVal(c: FormControl) {
  return c.value === 'bad' ? { invalid: true } : null;
}

Optimization for lists.

trackById(idx, item) { return item.id; }

Inject Router service.

this.router.navigate(['/items', id]);

ActivatedRoute snapshot or observable.

id = this.route.snapshot.paramMap.get('id');

State management simple.

user$ = new BehaviorSubject<User>(null);

Standard unsubscribe pattern.

obs$.pipe(takeUntil(this.destroy$)).subscribe();

Dynamic import.

const { MyComp } = await import('./my.comp');

Auth headers.

intercept(req, next) { const cloned = req.clone(...); return next.handle(cloned); }

toSignal() utility.

const data = toSignal(this.http.get(...));

toObservable() utility.

const val$ = toObservable(this.mySignal);

Watch changes.

effect(() => console.log('Changed:', this.mySignal()));

Implement ErrorHandler class.

handleError(err) { // logs to server }

Auto conversion.

@Input({ transform: booleanAttribute }) disabled: boolean = false;

Custom comparator.

count = signal(initial, { equal: (a, b) => a.id === b.id });

Note: mutate() is removed, use update().

state.update(s => ({...s, name: 'New'}));

ElementRef access.

@ViewChild('myDiv') div!: ElementRef;

KeyValue pipe.

*ngFor="let item of myObj | keyvalue"

OrderBy logic.

transform(arr) { return arr.sort((a,b) => ...); }

Experimental/Custom.

this.form.valueChanges.subscribe(v => mySignal.set(v));

Router events.

router.events.pipe(filter(e => e instanceof NavigationEnd))

TemplateRef/ViewContainer.

if (cond) { this.vcr.createEmbeddedView(this.tr); }

@Attribute injection.

constructor(@Attribute('type') type: string) {}

Intersection Observer.

obs.observe(el); ... onIntersect() { fetchNext(); }

Map and of.

if (cache) return of(cache); return http.get().pipe(tap(r => cache = r));

State management.

on(Action, (state) => ({ ...state, val: 1 }))

Memoized data.

createSelector(feature, s => s.items)

TestBed usage.

service = TestBed.inject(MyService); expect(service).toBeTruthy();

HttpClientTestingModule.

httpMock.expectOne('/api').flush(mockRes);

Set property.

component.myInput = 'test'; fixture.detectChanges();

Native element click.

el.nativeElement.click(); fixture.detectChanges();

Route array.

providers: [provideRouter(ROUTES)]

Environment file.

import { environment } from './env';

Meta service.

this.meta.updateTag({ name: 'desc', content: '...' });

Title service.

this.title.setTitle('New Title');

Reactive state.

export class Service { count = signal(0); }

Self reference.

path: 'dir', children: [ { path: '**', component: Dir } ]

Dynamic import in main.ts.

if (!window.Intl) await import('intl');