Angular JavaScript Interview Questions: Basic to Advanced

Angular JavaScript Interview Questions: Basic to Advanced

If you are hiring Angular developers, you need questions that separate people who memorized docs from people who have shipped real apps. If you are the candidate, you need the same list to know what to expect. Either way, a solid set of Angular JavaScript interview questions saves you from vague answers and wasted interview hours.

Here is the short answer. Strong Angular interviews cover five areas: components and templates, dependency injection, RxJS and change detection, routing and forms, and performance. Basic questions test vocabulary. Advanced ones test judgment, like when to use OnPush or how to avoid memory leaks in subscriptions. Many people searching for angular js interview questions also need the AngularJS vs. Angular distinction, so we cover it early.

Below, you get questions grouped from basic to advanced, each with a concise answer and a note on what a good response looks like. At Olibr, we help recruiters screen faster, so we added scoring cues you can reuse in your ATS notes and shortlist developers with confidence.

1. What is Angular and how does it differ from AngularJS?

Short interview answer

Angular is a TypeScript-based, component-driven framework from Google for building single-page apps. AngularJS (version 1.x) is the original framework from 2010, built on controllers, $scope, and two-way binding. Angular 2 and later was a full rewrite, not an upgrade, and AngularJS reached end of life in January 2022.

Angular is not a newer AngularJS. It is a different framework with the same name and a similar template idea.

Code or example

Ask candidates to compare the same counter in both frameworks. In AngularJS, you wire a controller to the scope:

angular.module('app', []).controller('CounterCtrl', function ($scope) {
  $scope.count = 0;
  $scope.inc = function () { $scope.count++; };
});

In modern Angular, the component owns its state and template:

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="count = count + 1">{{ count }}</button>`
})
export class CounterComponent {
  count = 0;
}

A good candidate points out that the second version has no scope object, uses event binding with parentheses, and gets type checking at build time.

Common follow-up questions

Expect interviewers to probe migration and real project experience. A strong answer names ngUpgrade or a rewrite-by-feature strategy, and explains why running both frameworks side by side is only a bridge. Use these follow-ups to test depth:

• Why did the Angular team choose TypeScript?
• How does the digest cycle in AngularJS differ from change detection in Angular?
• How would you migrate a large AngularJS app without freezing feature work?
• What does AOT compilation give you that AngularJS never had?

Scoring cue: a candidate who only lists syntax differences is junior. One who explains the architecture shift and a migration plan has likely done the work.

2. What are components, modules, and standalone components?

Short interview answer

A component is a class paired with a template, styles, and a selector, and it controls one piece of the UI. An NgModule groups components, directives, and pipes, and declares what they can use. Standalone components skip the module and list their dependencies in their own imports array. They became stable in Angular 15 and the default in Angular 19, so new projects rarely need NgModules.

Standalone components make the NgModule optional, not obsolete.

Code or example

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [RouterLink],
  template: `<a routerLink="/users">{{ name }}</a>`
})
export class UserCardComponent {
  @Input() name = '';
}

Compare this with the module version, where the class sits in an NgModule's declarations and the module imports RouterModule. A good candidate explains that the component now declares its own dependencies, which makes lazy loading and tree shaking simpler.

Common follow-up questions

Expect interviewers to test whether you have worked in both styles, since most production codebases still mix them.

• Can a standalone component use a component declared in an NgModule?
• How do you bootstrap an app without AppModule?
• What is the difference between providers in a module and in a component?
• How would you migrate a module-based app incrementally?

Scoring cue: a junior candidate recites the definitions. A strong candidate mentions the migration schematic and explains how standalone imports change lazy loading of routes.

3. How do data binding types work in Angular?

Short interview answer

Angular has four binding types. Interpolation {{ }} and property binding [prop] move data from the class to the template. Event binding (event) moves data from the template back to the class. Two-way binding [(ngModel)] combines the last two in one piece of syntax, often called banana in a box.

Two-way binding is just a property binding and an event binding wearing one hat.

Code or example

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="query" />
    <button [disabled]="!query" (click)="run()">Search {{ query }}</button>`
})
export class SearchComponent {
  query = '';
  run() { console.log(this.query); }
}

Good candidates note that ngModel needs FormsModule imported. They also show the desugared form, [ngModel]="query" (ngModelChange)="query = $event", to prove they know what the banana syntax does.

Common follow-up questions

Interviewers often ask how you would build two-way binding for your own component. A strong answer pairs an @Input with an @Output named with the Change suffix, or uses the newer model() signal.

• What is the difference between an HTML attribute and a DOM property?
• Why does [value] behave differently from value?
• Does interpolation escape HTML?

Scoring cue: candidates who explain attribute versus property, and who know that interpolation sanitizes content, understand the DOM beneath the framework.

4. What are directives and how do you create a custom one?

Short interview answer

Directives add behavior to elements in the DOM. Angular has three kinds: components (directives with a template), structural directives that change the layout, like *ngIf and *ngFor, and attribute directives that change how an existing element looks or acts, like ngClass. Since Angular 17, the built-in @if and @for blocks are the preferred way to write control flow.

A component is a directive with a template. Every other directive works without one.

Code or example

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  private el = inject(ElementRef);

  @HostListener('mouseenter') on() {
    this.el.nativeElement.style.background = 'yellow';
  }
  @HostListener('mouseleave') off() {
    this.el.nativeElement.style.background = '';
  }
}

Apply it with <p appHighlight>. A good candidate says the directive has no template and prefers Renderer2 or host bindings over raw nativeElement access, because direct DOM writes can break server-side rendering.

Common follow-up questions

This is one of the Angular JavaScript interview questions that quickly shows who has written their own code. Push past the definition with these:

• How does *ngIf desugar into an ng-template?
• What is the difference between @HostListener and @HostBinding?
• How do you pass a value into a directive, such as a color?
• When would you write a directive instead of a component?

Scoring cue: a junior candidate names ngIf and ngFor. A strong one builds a small directive on the spot and explains why it belongs in a directive and not a component.

5. What are pipes and the difference between pure and impure?

Short interview answer

A pipe transforms a value inside the template without changing the source data. Built-in examples include date, currency, uppercase, json, and async. You chain them with the | character, and the original value stays untouched.

Pure pipes are the default. Angular runs them only when the input reference or primitive value changes. Impure pipes, declared with pure: false, run on every change detection cycle, so they cost more and can slow a busy view.

A pure pipe trusts the reference. An impure pipe checks every time.

Code or example

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.slice(0, limit) + '...' : value;
  }
}

Use it as {{ title | truncate:30 }}. A good candidate explains that mutating an array in place will not retrigger a pure pipe, so you must pass a new array. They also know that async is impure by design, because it subscribes and unsubscribes for you.

Common follow-up questions

Interviewers use pipes to test change detection knowledge. In older angular js interview questions, the same idea was called a filter, so expect candidates with legacy experience to mention it.

• Why is filtering a list in an impure pipe a bad idea?
• How do you pass multiple arguments to a pipe?
• When would you call a method in the template instead of using a pipe?
• How do you unit test a pipe?

Scoring cue: a junior candidate lists built-in pipes. A strong one explains why pure pipes are cheaper than template method calls and when pure: false is justified.

6. What are Angular lifecycle hooks?

Short interview answer

Lifecycle hooks are methods Angular calls as it creates, updates, and destroys a component or directive. The constructor runs first and should only receive dependencies. ngOnInit runs once after the inputs are set, so setup logic belongs there.

Constructors inject, ngOnInit initializes, ngOnDestroy cleans up.

Code or example

export class FeedComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  private feed = inject(FeedService);

  ngOnInit() {
    this.feed.items$.pipe(takeUntil(this.destroy$)).subscribe();
  }
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Good candidates say ngOnDestroy is where you stop subscriptions and timers to prevent memory leaks. Strong ones also mention takeUntilDestroyed and DestroyRef, the newer, shorter way to do the same job.

Common follow-up questions

Interviewers like to test order and traps, since this topic is a staple of Angular JavaScript interview questions.

• Why not fetch data in the constructor?
• What is the difference between ngOnInit and ngAfterViewInit?
• Why is heavy logic in ngDoCheck risky?
• When does ngOnChanges not fire?

Scoring cue: a junior candidate recites the hook order. A strong one explains that ngOnChanges ignores mutated objects and links ngOnDestroy to leak prevention.

7. How does dependency injection work in Angular?

Short interview answer

Dependency injection (DI) is a pattern where a class asks for what it needs and Angular supplies it. The injector looks up a provider by token and returns an instance, so your classes never call new on their own services. Most services use providedIn: 'root', which gives you one shared, tree-shakable instance.

With DI, a class declares what it needs and Angular decides how to build it.

Injectors form a hierarchy: root, route, then component. A provider at component level creates a new instance for each component, which is useful for isolated state.

Code or example

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);
  user$ = this.http.get<User>('/api/me');
}

@Component({ selector: 'app-nav', standalone: true, template: `...` })
export class NavComponent {
  private auth = inject(AuthService);
}

Good candidates show the inject() function next to constructor injection. They also use an InjectionToken for values that are not classes, like an API URL. In older angular js interview questions, the same topic meant string names and $inject arrays to survive minification.

Common follow-up questions

Expect interviewers to test the resolution rules, not just the definition.

• What is the difference between providedIn: 'root' and a component-level provider?
• What do @Optional, @Self, and @SkipSelf do?
• When do you use useClass, useValue, useFactory, and useExisting?
• Why does a lazy-loaded route sometimes get its own service instance?

Scoring cue: a junior candidate says DI "creates services for you." A strong one explains the injector hierarchy and picks the right provider scope for a given problem.

8. How do components communicate with each other?

Short interview answer

Angular gives you four main channels. Parents pass data down with @Input or the input() function. Children send events up with @Output and EventEmitter, or the output() function. A parent can also reach a child directly with @ViewChild. For siblings or distant components, use a shared service that holds state in a BehaviorSubject or a signal.

Data flows down through inputs, events flow up through outputs, and everything else goes through a service.

Code or example

@Component({ selector: 'app-rating', standalone: true, template: `...` })
export class RatingComponent {
  value = input(0);
  rated = output<number>();
}

// parent template
<app-rating [value]="score" (rated)="score = $event" />

Good candidates explain that the child never mutates the parent's data. It emits an event and lets the parent decide. Strong ones also mention content projection with ng-content for passing markup, not just values.

Common follow-up questions

Among Angular JavaScript interview questions, this one shows quickly whether a candidate can structure a real feature. Ask these:

• When is a shared service better than input and output chains?
• Why is @ViewChild undefined inside ngOnInit?
• How do you avoid prop drilling through five levels?
• Can you pass data through route params instead?

Scoring cue: a junior candidate knows only @Input and @Output. A strong one picks a service with signals for shared state and warns against reaching into child components through @ViewChild.

9. What are observables and how do they differ from promises?

Short interview answer

An observable is a lazy stream of values over time that you consume by subscribing. A promise resolves once, starts running immediately, and cannot be cancelled. Observables can emit many values, can be unsubscribed, and come with RxJS operators like map, switchMap, and debounceTime.

A promise is one future value. An observable is a stream you can shape and cancel.

Code or example

query = new FormControl('');
results$ = this.query.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => this.http.get<Item[]>(`/api/items?q=${q}`))
);

In the template, results$ | async handles the subscription for you. A good candidate explains that switchMap cancels the stale request when the user keeps typing, which a promise chain cannot do. Strong ones also separate cold from hot observables.

Common follow-up questions

Of all Angular JavaScript interview questions, this one shows RxJS depth fastest.

• What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?
• How does a BehaviorSubject differ from a plain Subject?
• How do you prevent subscription leaks?
• When would you convert a stream with toSignal?

Scoring cue: a junior candidate says observables are "promises with extra features." A strong one picks the right flattening operator for a search box versus a save button and names the leak risks.

10. How does Angular routing, lazy loading, and guards work?

Short interview answer

The Angular router maps URLs to components and swaps views without a page reload. You define a routes array, place a <router-outlet> in the template, and navigate with routerLink or the Router service. Lazy loading fetches a route's code only when a user visits it, which shrinks the initial bundle. Guards are functions that decide whether navigation can proceed: canActivate, canDeactivate, canMatch, and resolve for pre-fetching data.

Lazy loading decides what the browser downloads. Guards decide who gets in.

Code or example

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    canActivate: [authGuard],
    loadComponent: () => import('./admin/admin.component')
      .then(m => m.AdminComponent)
  }
];

export const authGuard: CanActivateFn = () =>
  inject(AuthService).isLoggedIn() || inject(Router).createUrlTree(['/login']);

Good candidates point out that guards are now plain functions that use inject(), and that returning a UrlTree redirects cleanly. In AngularJS, the same job fell to ngRoute or ui-router.

Common follow-up questions

Among Angular JavaScript interview questions, routing shows fast whether someone has built a real multi-page app.

• What is the difference between canActivate and canMatch?
• How do you read route params, and what does withComponentInputBinding change?
• Which preloading strategies exist?
• How do you lazy load a whole feature with loadChildren?

Scoring cue: a junior candidate describes routerLink. A strong one ties lazy loading to bundle size and explains that a guard is a UX check, not real security, because the server must enforce access too.

11. What are template-driven and reactive forms?

Short interview answer

Template-driven forms keep the logic in the HTML. You add ngModel and Angular builds the form model behind the scenes. Reactive forms build that model in the class with FormControl, FormGroup, and FormArray, so the form is an explicit object you can test and observe. Use template-driven for small, simple forms. Use reactive for dynamic fields and complex validation.

Template-driven forms describe the form in HTML. Reactive forms describe it in code.

Code or example

form = inject(FormBuilder).nonNullable.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(8)]]
});

Bind it with <form [formGroup]="form" (ngSubmit)="save()">. A good candidate imports ReactiveFormsModule into the standalone component and reads valueChanges to react to input. Strong ones prefer typed forms and nonNullable to avoid null surprises.

Common follow-up questions

Forms feature in most Angular JavaScript interview questions because every real app has them. Legacy candidates may compare them to ng-model from AngularJS, which feels closest to the template-driven style.

• How do you write a custom validator, sync and async?
• What is the difference between setValue and patchValue?
• How do you build a dynamic list of fields with FormArray?
• When does updateOn: 'blur' help?

Scoring cue: a junior candidate lists the two styles. A strong one explains why reactive forms scale better and shows a cross-field validator on the group.

12. How do HTTP client and interceptors work?

Short interview answer

HttpClient is Angular's built-in service for calling APIs. Every method, like get or post, returns a cold observable, so the request fires only when something subscribes. Interceptors sit between your code and the server and modify every request or response in one place. Typical jobs are attaching auth tokens, handling errors globally, logging, and showing loading spinners.

Interceptors let you change every HTTP call once instead of in fifty services.

Code or example

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }
  });
  return next(authReq);
};

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))]
});

Good candidates explain that requests are immutable, so you call clone() instead of editing the original. They also know that order matters. Requests pass through interceptors first to last, and responses come back in reverse.

Common follow-up questions

Few Angular JavaScript interview questions reveal real-project experience as fast as this one. Push on retries, typing, and cancellation:

• How do you retry a failed request with backoff?
• What is the difference between functional interceptors and the class-based HTTP_INTERCEPTORS token?
• How do you type a response with get<User[]>()?
• How do you cancel a request when the user leaves the page?

Scoring cue: a junior candidate calls http.get inside components. A strong one keeps calls in services, handles 401 token refresh in an interceptor, and skips the refresh call itself to avoid an infinite loop.

13. How does change detection work and how do you optimize it?

Short interview answer

Change detection is how Angular notices changed data and updates the DOM. Zone.js patches async APIs like clicks, timers, and HTTP calls, then tells Angular to check the component tree from the top down. The default strategy checks every component on every trigger.

OnPush narrows that work. An OnPush component is checked only when an input reference changes, an event fires inside it, an async pipe emits, or a signal it reads changes.

OnPush trades automatic checking for predictable checking.

Code or example

@Component({
  selector: 'app-price',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `{{ price() | currency }}`
})
export class PriceComponent {
  price = input.required<number>();
}

A good candidate explains that mutating an object passed as input will not trigger a check under OnPush, so you pass a new reference. They also use track in @for, move logic out of template method calls, and call markForCheck() only when needed.

Common follow-up questions

This is one of the Angular JavaScript interview questions that separates users from people who understand the framework.

• What is the difference between detectChanges() and markForCheck()?
• Why can ExpressionChangedAfterItHasBeenChecked appear in dev mode?
• When would you run code with runOutsideAngular()?
• What changes in a zoneless app?

Scoring cue: a junior candidate says "OnPush makes it faster." A strong one explains why it is faster and shows how signals reduce checks further.

14. What is the difference between AOT and JIT compilation?

Short interview answer

Both turn your templates and decorators into JavaScript the browser can run. The difference is timing. AOT (ahead-of-time) compiles during the build, while JIT (just-in-time) compiles in the browser at runtime. Since Angular 9 and the Ivy engine, AOT is the default for both ng build and ng serve.

AOT moves the compiler from the user's browser to your build server.

Code or example

@Component({
  selector: 'app-profile',
  standalone: true,
  template: `{{ user.nmae }}`  // typo
})
export class ProfileComponent {
  user = { name: 'Asha' };
}

Try this with strictTemplates on. A good candidate says AOT fails the build on the typo, where JIT would render a blank value in production. They also mention that AOT avoids compiling templates in the browser, which helps with a strict Content Security Policy.

Common follow-up questions

Interviewers use this topic in Angular JavaScript interview questions to check build pipeline knowledge, not just syntax.

• Why does AOT produce smaller bundles?
• Where does JIT still show up, such as in some test setups?
• What does strictTemplates add to AOT checks?
• How does tree shaking depend on AOT output?

Scoring cue: a junior candidate says "AOT is faster." A strong one explains build-time error detection and the smaller, safer bundle that follows.

15. What JavaScript and TypeScript concepts come up in Angular interviews?

Short interview answer

Angular is TypeScript first, so interviewers test the language fundamentals under the framework. Expect questions on closures, this binding, promises, async/await, and the event loop, plus TypeScript features like generics, union types, and decorators.

Angular is TypeScript with a framework attached, so weak language basics show up as weak Angular.

Code or example

class Timer {
  count = 0;
  broken() { setInterval(function () { this.count++; }, 1000); }
  fixed() { setInterval(() => this.count++, 1000); }
}

Ask what happens in each method. A good candidate explains that the regular function gets its own this, which is undefined in a strict class body, so it throws. The arrow function captures this lexically. Strong candidates also write a small generic, such as first<T>(items: T[]): T, and explain that it keeps type safety without any.

Common follow-up questions

Many angular js interview questions from legacy teams also test plain JavaScript, like hoisting and prototypes, so prepare for both styles. Use these:

• What is the difference between let, const, and var?
• How does the event loop order microtasks and timers?
• What is the difference between interface and type?
• When do you pick unknown over any?

Scoring cue: a junior candidate recites definitions. A strong one predicts the output of a tricky async snippet and uses strict typing by default.

16. How do you handle state, SSR, and signals in Angular?

Short interview answer

State in Angular lives at three levels: local component state, shared state in a service, and global state in a library like NgRx. Signals are the modern primitive. A signal() holds a value, computed() derives from it, and effect() runs side effects. Angular tracks which signals a template reads and updates only that part. SSR renders the page on the server with @angular/ssr, then hydration reuses that DOM in the browser instead of rebuilding it.

Signals tell Angular exactly what changed, so it stops guessing.

Code or example

@Injectable({ providedIn: 'root' })
export class CartStore {
  items = signal<Item[]>([]);
  total = computed(() => this.items().reduce((s, i) => s + i.price, 0));
  add(item: Item) { this.items.update(list => [...list, item]); }
}

Good candidates note that update returns a new array and never mutates the old one. They also warn that SSR code must not touch window or document directly, because the server has no browser. Use isPlatformBrowser or afterNextRender for that work.

Common follow-up questions

Closing out these Angular JavaScript interview questions, this topic tests whether a candidate keeps up with the framework and can justify a state strategy instead of defaulting to a library.

• When do you pick NgRx over a signal-based service?
• What is the difference between computed and effect?
• Why do hydration mismatches happen?
• How does toSignal bridge RxJS and signals?

Scoring cue: a junior candidate calls signals "a replacement for RxJS." A strong one uses signals for synchronous UI state, keeps observables for async streams, and explains how SSR changes where code can run.

Preparing for your Angular interview

These sixteen topics cover most of what Angular JavaScript interview questions ask, from components and binding to RxJS, change detection, and signals. If you are the candidate, practice by writing the code examples from memory, not rereading the answers. If you are the interviewer, listen for reasoning, such as why OnPush helps or why a route guard is not real security.

Recruiters can turn the scoring cues into a short rubric and paste it into your ATS notes, so every interviewer rates candidates the same way. That keeps decisions consistent and shortens the shortlist stage. If you still need people to interview, search verified Angular developer profiles on Olibr and filter by skill, experience, and location. It is free for recruiters.

For engineers

Find work worth your time.

Live engineering roles across India and the US, matched to your stack. Build a profile recruiters actually discover.

Browse jobsHow it works