Question 1

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

Accepted Answer

The new built-in control flow syntax (`@if`, `@for`, `@switch`) does not require importing structural directives or `CommonModule`. It features a clean syntax, supports automatic track-by enforcement in loops, and yields better performance because it compiles to plain JavaScript operations rather than directive lookups.

Question 2

What is the difference between the constructor and ngOnInit?

Accepted Answer

The **constructor** runs when the class is instantiated — use it only for DI. **ngOnInit** runs after Angular has set the component's `@Input` properties, so it's the correct place for initialization logic that depends on inputs or for starting data fetches.

Question 3

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

Accepted Answer

`setValue()` updates the entire form group and throws an error if any controls are missing from the input object. `patchValue()` updates only the specified controls, ignoring missing ones, making it ideal for partial state updates.

Question 4

What are template reference variables?

Accepted Answer

A **template reference variable** (`#myInput`) names an element, component, or directive in the template so you can reference it elsewhere in that template (e.g. `myInput.value`) or query it with `@ViewChild('myInput')`.

Question 5

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

Accepted Answer

You can set base href in `angular.json` using the `--base-href` flag during build, or provide the `APP_BASE_HREF` token dynamically in the bootstrap providers array, resolving the base path dynamically from window/location parameters.

Question 6

What are components and modules in Angular?

Accepted Answer

A **component** controls a piece of UI via a template, a TypeScript class, and styles (declared with `@Component`). A **module** (`@NgModule`) groups related components, directives, pipes, and providers into a cohesive block and declares what it exports/imports. Modern Angular also supports **standalone components** that skip NgModules.

Question 7

What is Angular and how does it differ from AngularJS?

Accepted Answer

**Angular** (2+) is a TypeScript-based, component-driven SPA framework. Unlike **AngularJS** (1.x, JavaScript, controllers/$scope, two-way digest cycle), modern Angular uses components + modules, a hierarchical DI system, RxJS observables, and ahead-of-time compilation — making it faster, more modular, and strongly typed.

Question 8

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

Accepted Answer

`ngOnChanges` fires whenever inputs bound via property binding change. It receives a `SimpleChanges` object mapping input names to their previous and current values. It runs before `ngOnInit` and on every subsequent input value mutation.

Question 9

How do child components emit events to parents?

Accepted Answer

A child declares `@Output() change = new EventEmitter<T>()` and calls `this.change.emit(value)`. The parent binds `(change)="handler($event)"`. Modern Angular also offers the `output()` function as a signals-based alternative.

Question 10

What does the Angular CLI provide?

Accepted Answer

The **Angular CLI** scaffolds and manages projects: `ng new`, `ng generate` (components/services/etc.), `ng serve` (dev server), `ng build` (optimized prod build), `ng test`, and schematics for consistent code generation and updates (`ng update`).

ANGULARDECODED.

Transmission log

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?

How do functional interceptors work with provideHttpClient()?

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

How do functional route guards and lazy loadComponent work in modern Angular?

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?

inject() vs constructor injection — when should you use each?

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

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

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?

Standalone bootstrapApplication — how does Angular bootstrap without NgModules in 2025?

How do toSignal() and toObservable() bridge Signals and RxJS?

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?

Signal inputs input() vs @Input() — what changes in Angular 17.1+?

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

afterRender vs afterNextRender vs ngAfterViewInit — which to use?

output() vs @Output() EventEmitter — the new signal outputs?

What is trackBy in ngFor and why use it?

How does the @defer block work and what triggers are available?

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 are ng-container and ng-template?

What is the difference between Observables and Promises?

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 the new control flow @if / @for / @switch replace *ngIf and *ngFor?

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?

How do you test signal components, defer blocks, and new control flow in 2025?

How do signal forms and ControlValueAccessor evolve in modern Angular?

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?

Why does @for require track and how does @empty improve UX?

How has the Angular build changed with esbuild + Vite (ng build / ng serve)?

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?

How does the new control flow @if / @for / @switch replace ngIf and ngFor?