Q: Explain the difference between FormGroup.patchValue() and FormGroup.setValue().

**Core concept.** Both methods update form values, but ** setValue() ** is strict, requiring a full value object structure matching the Form Group exactly. ** patchValue() ** is lenient, accepting a partial object and updating only the matching keys while leaving the rest unchanged. ### setValue vs patchValue | Metric | setValue() | patchValue() | | --- | --- | --- | | Object Matching | Strict (must match all form fields) | Loose (allows partial fields) | | Missing Keys |

Q: What is the purpose of ngOnChanges and how does it capture changes in @Input properties?

**Core concept.** ** ngOnChanges ** is a lifecycle hook that executes when any @Input bound property changes. It receives a ** SimpleChanges ** object containing the current and previous values of the changed inputs. This hook runs before ngOnInit and on every subsequent change of an input property. <rect class='d-box' x='20' y='60' width='100' heig

Q: How do child components emit events to parents?

**Core concept.** A child exposes an @Output() property of type EventEmitter , and calls this.event.emit(value) to notify the parent. The parent binds to it like a DOM event — (childEvent)="handler($event)" . This is the "data up" channel that complements "data down" via @Input . (Modern Angular also offers the output() function.) <svg class='iq-diagram' viewBox='0 0 460 150' role='img' aria-label='Child emits via Output

Q: What does the Angular CLI provide?

**Core concept.** The Angular CLI ( ng ) is the official command-line tool that **scaffolds, serves, builds, tests, and upgrades** Angular projects. It generates boilerplate ( ng generate ), runs a dev server with live reload ( ng serve ), produces optimized production builds ( ng build ), and keeps dependencies current ( ng update ) — all following Angular conventions. <svg class='iq-diagram' viewBox='0 0 460 150' role='img' aria-label='An

Question 1

Explain the new Control Flow (@if, @for, @switch) and how it compares to structural directives.

Accepted Answer

**Core concept.** In Angular 17, the framework replaced legacy structural directives (*ngIf, *ngFor, *ngSwitch) with a built-in compiler-level block control flow (@if, @for, @switch). It offers a cleaner syntax, requires zero imports in standalone components, enforces the performance-critical track key in loops, and compiles down to optimized JavaScript code.

Question 2

What is the difference between the constructor and ngOnInit?

Accepted Answer

**Core concept.** The **constructor** runs when the class is instantiated — its job is **Dependency Injection** (receive services), not real work. ngOnInit is an Angular **lifecycle hook** that runs **after** Angular has set the component's @Input bindings, so it's where initialization that depends on inputs belongs.

Question 3

Explain the difference between FormGroup.patchValue() and FormGroup.setValue().

Accepted Answer

**Core concept.** Both methods update form values, but **setValue()** is strict, requiring a full value object structure matching the Form Group exactly. **patchValue()** is lenient, accepting a partial object and updating only the matching keys while leaving the rest unchanged. ### setValue vs patchValue | Metric | setValue() | patchValue() | | --- | --- | --- | | Object Matching | Strict (must match all form fields) | Loose (allows partial fields) | | Missing Keys |

Question 4

What are template reference variables?

Accepted Answer

**Core concept.** A template reference variable — declared with #name in the template — gives you a handle to a **DOM element**, a **component**, or a **directive** within that same template. You can then read its properties or call its methods elsewhere in the template.

Question 5

How do you configure dynamic base href in Angular builds for different environments?

Accepted Answer

**Core concept.** The base href tells the browser how to resolve relative link target paths (assets, chunks). Instead of hardcoding in the index.html, you can configure base href dynamically during compile time (using CLI flags like --base-href) or programmatically at runtime by providing the **APP_BASE_HREF** token. ### Dynamic Resolution If your application runs in sub-folders depending on user locales or environments,

Question 6

What are components and modules in Angular?

Accepted Answer

**Core concept.** A **component** controls a piece of the screen — it's a TypeScript class decorated with @Component that ties together a **template** (HTML), **styles**, and logic. A **module** (@NgModule) groups related components, directives, and pipes plus their dependencies into a cohesive block. Modern Angular increasingly favours **standalone components**, which need no NgModule.

Question 7

What is Angular and how does it differ from AngularJS?

Accepted Answer

**Core concept.** **Angular** (2+) is a complete **TypeScript** rewrite of the original **AngularJS** (1.x). It replaced AngularJS's scopes/controllers and digest-cycle change detection with a **component-based**, faster architecture, plus a CLI, RxJS, mobile/SSR support, and modern tooling. They are **not** compatible — Angular is a different framework, not an upgrade.

Question 8

What is the purpose of ngOnChanges and how does it capture changes in @Input properties?

Accepted Answer

**Core concept.** **ngOnChanges** is a lifecycle hook that executes when any @Input bound property changes. It receives a **SimpleChanges** object containing the current and previous values of the changed inputs. This hook runs before ngOnInit and on every subsequent change of an input property.

Question 9

How do child components emit events to parents?

Accepted Answer

**Core concept.** A child exposes an @Output() property of type EventEmitter, and calls this.event.emit(value) to notify the parent. The parent binds to it like a DOM event — (childEvent)="handler($event)". This is the "data up" channel that complements "data down" via @Input. (Modern Angular also offers the output() function.)

Question 10

What does the Angular CLI provide?

Accepted Answer

**Core concept.** The Angular CLI (ng) is the official command-line tool that **scaffolds, serves, builds, tests, and upgrades** Angular projects. It generates boilerplate (ng generate), runs a dev server with live reload (ng serve), produces optimized production builds (ng build), and keeps dependencies current (ng update) — all following Angular conventions.

Angular Interview Library

Question Catalog

Explain the new Control Flow (@if, @for, @switch) and how it compares to structural directives.

What is the difference between the constructor and ngOnInit?

Explain the difference between FormGroup.patchValue() and FormGroup.setValue().

What are template reference variables?

How do you configure dynamic base href in Angular builds for different environments?

What are components and modules in Angular?

What is Angular and how does it differ from AngularJS?

What is the purpose of ngOnChanges and how does it capture changes in @Input properties?

How do child components emit events to parents?

What does the Angular CLI provide?

What are standalone components?

What is the fixture.detectChanges() method in Angular testing, and when should you call it?

What are the types of data binding in Angular?

What is the difference between @ViewChildren and @ViewChild?

What is a route resolver and when is it useful?

Explain how to perform unit testing on components with Signals using TestBed.

How do you handle SSR hydration mismatch errors using ngSkipHydration?

What are route guards in Angular?

What is standard content projection vs. Multi-Slot Content Projection?

What is the APP_INITIALIZER token and how is it used to load configuration at startup?

Explain what output() and outputFromObservable() are in modern Angular and how they differ from @Output().

How do you create a custom validator in reactive forms?

How does catchError work in RxJS, and how do you return a fallback value?

What are Angular lifecycle hooks?

What is the role of NG_VALUE_ACCESSOR in a custom component?

What is the difference between computed() signals and standard method/getter calls in templates?

What is the role of NgRx Effects, and why do we separate side effects from reducers?

What is a directive and what are the types?

How do you handle dynamic validation where one form field's validator depends on another field's value?

How do you mock services in Angular unit tests using Jasmine/Jest spies?

What are @ViewChild and @ContentChild?

What is ComponentFixtureAutoDetect and how does it affect unit tests?

What is the async pipe and why is it useful?

Explain the difference between Shadow DOM, Emulated, and None View Encapsulation with compile output.

What do @HostListener and @HostBinding do?

How do you optimize initial bundle size using Route Preloading with custom strategies?

What is the difference between reactive and template-driven forms?

What is trackBy in ngFor and why use it?

What is the purpose of updateOn in Reactive Forms?

What are functional Route Guards, and how do they differ from class-based guards?

How do you handle errors and retries globally with interceptors?

What is the difference between component styling using :host, :host-context, and ::ng-deep?

What is the difference between Observables and Promises?

What are ng-container and ng-template?

What is ngTemplateOutlet?

How do you pass data between sibling components that don't have a direct parent-child relationship?

What are functional HTTP Interceptors in modern Angular, and how do you register them?

How does Dependency Injection work in Angular?

What is the difference between constructor-based DI and the inject() function?

How does two-way binding work under the hood?

How do you read route parameters?

What is the difference between take(1) and first() operators in RxJS?

How do you bootstrap a standalone Angular application?

What is provideHttpClient(withInterceptors([...])) and how does it replace legacy HTTP interceptor providing?

What is a service and why use it?

What is a FormArray?

How do you handle internationalization (i18n) in Angular?

What is an HTTP interceptor?

What are pipes in Angular?

What is the difference between providing a service in root vs in a component?

What is the customElements schema in Angular and when do you need to use it?

How do you optimize images in Angular using NgOptimizedImage?

How does routing and lazy loading work in Angular?

What is content projection and ng-content?

What is the difference between AOT and JIT compilation?

What are security vulnerabilities in Angular apps, and how does DomSanitizer prevent XSS?

What are Deferrable Views (@defer) and how do they work in Angular 17+?

What does ChangeDetectorRef do?

How do you handle micro-frontend architecture in Angular using Module Federation?

What are signal inputs and model() in modern Angular?

What is the purpose of the KeyValueDiffers and IterableDiffers services?

How do you build a custom form control by implementing the ControlValueAccessor interface?

How does change detection work in Angular?

How does compilation work under the hood in Ivy?

What is an InjectionToken?

What is Zone.js, how does it monkey-patch browser APIs, and how do you build a Zoneless Angular application?

What is Angular Universal / SSR?

What is the difference between ElementRef, TemplateRef, and ViewContainerRef?