INTERVIEW QUESTIONS

Angular Interview Questions

Practice Angular prompts by theme and build clearer interview answers.

Practice by topicAngular topic lensesClear answer prompts

Showing 6 Angular Forms practice prompts

ANGULAR

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

Template-driven forms rely on template directives (`ngModel`, `ngForm`), with validations and state managed asynchronously by the DOM. Reactive forms (`ReactiveFormsModule`) use model-driven architecture with explicit TypeScript objects (`FormControl`, `FormGroup`), providing synchronous validation, immutable state changes, and direct observable stream access.

◦ forms

ANGULAR

How do you build a custom Reactive Validator in Angular?

A custom synchronous validator is a function implementing `ValidatorFn`: `(control: AbstractControl): ValidationErrors | null => { const forbidden = /admin/i.test(control.value); return forbidden ? { forbiddenName: { value: control.value } } : null; }`. For asynchronous validation (e.g., checking username availability via HTTP), return an `Observable<ValidationErrors | null>`.

◦ forms

ANGULAR

What is `ControlValueAccessor` (CVA) in Angular?

`ControlValueAccessor` is the interface that bridges custom DOM UI widgets (like custom rich text editors or star rating selectors) with Angular's Forms API (`formControl`, `ngModel`). It requires implementing `writeValue`, `registerOnChange`, `registerOnTouched`, and `setDisabledState`, allowing the custom component to participate seamlessly in validation and form state.

◦ forms

ANGULAR

Users occasionally submit the same checkout order twice due to rapid double-clicking. How do you prevent this at the Angular component and architecture level?

1) In the UI, disable the submit button immediately upon form submission using reactive state (`loading = signal(false)`). 2) In the event stream pipeline, pipe the button's action through RxJS `exhaustMap()`: `submit$.pipe(exhaustMap(() => this.checkoutService.placeOrder())).subscribe()`, which discards any clicks until the HTTP response completes. 3) Ensure the HTTP POST request attaches an Idempotency-Key header via an HttpInterceptor to guarantee backend idempotency even if network retries occur.

◦ forms

ANGULAR

A multi-step onboarding wizard in Angular requires validating steps independently while preserving draft data across navigations. How do you structure the state and form architecture?

1) Create an `@Injectable()` WizardStateService provided at the wizard's parent container route injector level (so state persists across child step navigations but is destroyed when onboarding completes). 2) Use a single top-level `FormGroup` containing nested `FormGroup` instances for each step. 3) Implement `CanDeactivateFn` on step routes to alert users if required step inputs are invalid. 4) Persist drafts to `sessionStorage` on step changes so users can reload without data loss.

◦ forms

Your next interview is closer than you think.

Practice smarter and land better opportunities.

✓ Start with the free plan✓ No credit card✓ Cancel anytime

Start preparing free