Angular Interview Questions (2025)

// Observable - lazy, multiple values
const obs$ = interval(1000);
const sub = obs$.subscribe(n => console.log(n));
sub.unsubscribe();  // cancel

// Promise - eager, one value
const p = fetch('/api').then(r => r.json());

Observables are preferred in Angular for HTTP, routing events, and form value changes.

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous programs using observable sequences.

Common Angular operators:

• map — transform each value
• filter — filter values
• switchMap — cancel previous inner observable, switch to new (HTTP search)
• mergeMap — run inner observables in parallel
• concatMap — run inner observables sequentially
• tap — side effects without transforming
• catchError — error handling
• debounceTime — wait N ms before emitting (search input)
• distinctUntilChanged — skip duplicate consecutive values
• takeUntil — complete when another observable emits (unsubscribe pattern)
• forkJoin — wait for all observables to complete (parallel HTTP)
• combineLatest — emit when any source emits, with all latest values

A Subject is both an Observable and an Observer — it can emit values AND be subscribed to. It’s multicasting (all subscribers get the same emission).

const subject = new Subject<string>();
subject.subscribe(v => console.log('A:', v));
subject.subscribe(v => console.log('B:', v));
subject.next('hello');  // both A and B receive 'hello'

Types:

• Subject — no initial value, only future emissions
• BehaviorSubject — holds a current value, new subscribers get it immediately
• ReplaySubject(n) — replays last N values to new subscribers
• AsyncSubject — emits only the last value when the sequence completes

BehaviorSubject is the most common for shared state in services.

Lazy loading loads feature modules only when the user navigates to their route — reducing initial bundle size and improving startup time.

const routes: Routes = [
  { path: 'admin', loadChildren: () =>
      import('./admin/admin.module').then(m => m.AdminModule) },
  // Standalone (Angular 14+)
  { path: 'dashboard', loadComponent: () =>
      import('./dashboard.component').then(c => c.DashboardComponent) },
];

The router code-splits the module into a separate chunk. Angular CLI automatically splits at every loadChildren/loadComponent boundary.

Route Guards control whether navigation can proceed or not.

Types (functional guards, Angular 15+):

// Functional guard (modern)
export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  return auth.isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);
};

A Resolver pre-fetches data before a route activates. The router waits for the resolver to complete before rendering the component — so the component always has data immediately.

export const userResolver: ResolveFn<User> = (route) => {
  const id = route.paramMap.get('id')!;
  return inject(UserService).getUser(id);
};

// Route definition
{ path: 'user/:id', component: UserComponent, resolve: { user: userResolver } }

// In component
constructor(private route: ActivatedRoute) {}
ngOnInit() {
  this.user = this.route.snapshot.data['user'];
}

By default, Angular checks the entire component tree on every event. OnPush tells Angular to only check a component when:

1. An @Input() reference changes
2. An event originates from the component or its children
3. An Observable subscribed via async pipe emits
4. Change detection is manually triggered (MarkForCheck, detectChanges)

@Component({
  selector: 'app-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})

Key rule: With OnPush, mutating an object/array won’t trigger updates — you must pass a new reference ([...arr] or {...obj}).

Performance optimization for large component trees.

Zone.js is a library that monkey-patches browser async APIs (setTimeout, Promises, XHR, etc.) to intercept their execution. Angular uses it to know when async operations complete so it can trigger change detection automatically.

NgZone is Angular’s wrapper around Zone.js with two key methods:

• ngZone.run() — run code inside Angular’s zone (triggers change detection)
• ngZone.runOutsideAngular() — run code outside Angular’s zone (performance, e.g., heavy animations)

constructor(private ngZone: NgZone) {}

startHeavyWork() {
  this.ngZone.runOutsideAngular(() => {
    // runs without triggering CD on every frame
    requestAnimationFrame(() => this.ngZone.run(() => this.done = true));
  });
}

In Angular 18+, zoneless mode is experimental — apps can opt out of Zone.js entirely using Signals.

Pure pipe (default) — only re-runs transform() when the input reference changes. Angular can cache the result. Suitable for most transformations.

Impure pipe — re-runs transform() on every change detection cycle, regardless of whether the input changed. Use only when the pipe depends on mutable state (e.g., current date, external state).

@Pipe({ name: 'myPipe', pure: false })  // impure
export class MyPipe implements PipeTransform { ... }

Impure pipes can hurt performance. Avoid unless necessary — prefer storing derived values in the component instead.

ViewEncapsulation controls how component styles are scoped.

@Component({
  encapsulation: ViewEncapsulation.None,  // styles go global
})

Emulated is best for most cases. Use None when you need to style third-party components. ShadowDom when building web components.

FormControl — tracks value and validity of a single input field.

FormGroup — groups multiple FormControls into a single object.

FormArray — dynamic list of controls.

FormBuilder — service that simplifies creating form groups.

constructor(private fb: FormBuilder) {}

this.form = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  address: this.fb.group({
    city: [''],
    zip: ['']
  })
});

// Access values
this.form.get('email')?.value;
this.form.value;  // all values as object
this.form.valid;  // boolean

A custom validator is a function that returns null (valid) or a ValidationErrors object (invalid).

// Sync validator
function noSpaces(control: AbstractControl): ValidationErrors | null {
  return control.value?.includes(' ')
    ? { noSpaces: 'No spaces allowed' }
    : null;
}

// Use it
this.form = this.fb.group({
  username: ['', [Validators.required, noSpaces]]
});

Cross-field validator (on the FormGroup):

function passwordMatch(group: AbstractControl): ValidationErrors | null {
  const p = group.get('password')?.value;
  const c = group.get('confirm')?.value;
  return p === c ? null : { mismatch: true };
}

An HTTP Interceptor intercepts every HTTP request/response to add cross-cutting behavior: auth tokens, logging, error handling, loading spinners.

// Functional interceptor (Angular 15+)
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    headers: req.headers.set('Authorization', `Bearer ${token}`)
  });
  return next(authReq).pipe(
    catchError(err => {
      if (err.status === 401) inject(Router).navigate(['/login']);
      return throwError(() => err);
    })
  );
};

// Register in app.config.ts
provideHttpClient(withInterceptors([authInterceptor]))

switchMap maps each source emission to an inner Observable, cancelling the previous inner observable when a new one arrives.

Best use case: Search-as-you-type (cancel previous HTTP call when user types again).

this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.apiService.search(query))
).subscribe(results => this.results = results);

• Use switchMap when only the latest result matters (search, route params)
• Use mergeMap when all results matter (parallel, order doesn’t matter)
• Use concatMap when order matters (sequential queue)
• Use exhaustMap when you want to ignore new emissions while processing (login button)

Used in directives/components to interact with the host element (the element the directive is applied to).

@HostListener — listens to events on the host element:

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.background = 'yellow';
  }
  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.background = '';
  }
  constructor(private el: ElementRef) {}
}

@HostBinding — binds to a property of the host element:

@HostBinding('class.active') isActive = false;
@HostBinding('attr.disabled') isDisabled = false;

ElementRef — gives direct access to the native DOM element:

constructor(private el: ElementRef) {}
ngAfterViewInit() {
  this.el.nativeElement.style.color = 'red';  // direct DOM mutation
}

Renderer2 — Angular’s abstraction for DOM manipulation. Safer:

constructor(private renderer: Renderer2, private el: ElementRef) {}
ngAfterViewInit() {
  this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
}

Use Renderer2 because:

1. Works with Angular Universal (SSR) — no document/window dependency
2. Works in Web Workers
3. XSS-safe for setting attributes
4. Future-proof if Angular moves off the DOM

Avoid nativeElement direct manipulation unless absolutely necessary.

Pattern used by Angular modules (like RouterModule, StoreModule) to configure a module with providers at the root vs feature level.

• forRoot(config) — call once in AppModule. Registers the service as a singleton + module declarations. E.g., RouterModule.forRoot(routes).
• forChild() — call in feature modules. Registers only declarations (no duplicate singleton providers). E.g., RouterModule.forChild(featureRoutes).

This prevents multiple instances of services (like the router) when lazy-loaded modules are included.

// AppModule
RouterModule.forRoot(appRoutes)

// AdminModule (lazy loaded)
RouterModule.forChild(adminRoutes)

TemplateRef — represents an embedded template (<ng-template>). It is a blueprint — not rendered until inserted.

ViewContainerRef — a container in the DOM where you can dynamically insert views (from TemplateRef or components).

@Directive({ selector: '[appIf]' })
export class IfDirective {
  constructor(
    private tpl: TemplateRef<any>,
    private vc: ViewContainerRef
  ) {}

  @Input() set appIf(condition: boolean) {
    if (condition) this.vc.createEmbeddedView(this.tpl);
    else this.vc.clear();
  }
}

This is how *ngIf is implemented internally.

An architectural pattern for organizing modules:

CoreModule — imported once in AppModule. Contains:

• Singleton services (guards, interceptors)
• Root-level components (Navbar, Footer)
• Guards constructor to throw if imported more than once

SharedModule — imported in every feature module that needs it. Contains:

• Reusable components, directives, pipes
• CommonModule, ReactiveFormsModule re-exports
• No services (would break singleton pattern)

@NgModule({
  declarations: [LoadingSpinnerComponent, TruncatePipe],
  imports: [CommonModule],
  exports: [LoadingSpinnerComponent, TruncatePipe, CommonModule]
})
export class SharedModule {}

In modern standalone Angular, this pattern is less needed — import directly.

Use firstValueFrom() or lastValueFrom() from RxJS to convert an Observable to a Promise so you can use async/await:

import { firstValueFrom } from 'rxjs';

async loadUser(id: string) {
  try {
    const user = await firstValueFrom(this.userService.getUser(id));
    this.user = user;
  } catch (err) {
    console.error(err);
  }
}

firstValueFrom takes the first emission and completes. lastValueFrom waits for completion and takes the last value. The old toPromise() is deprecated.

InjectionToken creates a DI token for non-class values (strings, objects, configs, functions) that can’t be used as DI tokens directly.

// Create token
export const API_URL = new InjectionToken<string>('API_URL');

// Provide in app.config.ts
{ provide: API_URL, useValue: 'https://api.example.com' }

// Inject in service
constructor(@Inject(API_URL) private apiUrl: string) {}

In modern Angular, use inject() function:

const apiUrl = inject(API_URL);

Angular has a tree of injectors that mirrors the component tree. Each node can have its own providers.

When resolving a dependency:

1. Check the component’s own injector
2. Walk up the component tree
3. Check the module injector
4. Check the root (environment) injector

This means you can have multiple instances of a service — useful for state scoped to a subtree:

@Component({
  providers: [CounterService],  // local instance for this component and its children
})
export class WidgetComponent {}

Two widgets → two independent CounterService instances.

JIT (Just-in-Time): Templates compiled in the browser at runtime. Larger bundle (includes compiler). Slower first load. Good for development.

AOT (Ahead-of-Time): Templates compiled at build time on the server. No compiler shipped. Faster rendering. Detects template errors at build time. Default in production builds.

ng build            # AOT by default
ng serve --aot      # AOT in dev

AOT benefits:

• Smaller bundle (no Angular compiler)
• Faster render (no compilation step)
• Earlier error detection
• More secure (template injections caught at build time)

this.http.get('/api/data').pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status === 0) {
      // Network error
      console.error('Network error:', error.error);
    } else {
      // Server error
      console.error(`Server error ${error.status}:`, error.message);
    }
    return throwError(() => new Error('Something went wrong'));
  })
).subscribe({
  next: data => this.data = data,
  error: err => this.errorMsg = err.message
});

For global error handling, use an HTTP interceptor with catchError. For uncaught errors, implement ErrorHandler:

@Injectable()
class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) { /* log to Sentry etc */ }
}

forkJoin runs multiple observables in parallel and emits an array of their last values only when all complete. Perfect for parallel HTTP calls.

forkJoin({
  user: this.http.get<User>('/api/user/1'),
  orders: this.http.get<Order[]>('/api/orders'),
  config: this.http.get<Config>('/api/config'),
}).subscribe(({ user, orders, config }) => {
  this.user = user;
  this.orders = orders;
});

Caveat: If any observable errors, forkJoin errors and others are cancelled. Handle with catchError on each inner observable if needed.

combineLatest emits on every emission. forkJoin only emits once when all complete.

takeUntil completes a subscription when another observable emits — commonly used for automatic unsubscription on component destroy.

private destroy$ = new Subject<void>();

ngOnInit() {
  this.service.data$.pipe(
    takeUntil(this.destroy$)
  ).subscribe(d => this.data = d);

  interval(1000).pipe(
    takeUntil(this.destroy$)
  ).subscribe(n => this.counter = n);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Cleaner alternative in Angular 16+: takeUntilDestroyed() from @angular/core/rxjs-interop:

data$ = this.service.data$.pipe(takeUntilDestroyed());

Angular Universal enables Server-Side Rendering (SSR) — the Angular app runs on Node.js server to render HTML, which is sent to the browser. This gives:

• Better SEO — crawlers see content immediately
• Faster First Contentful Paint — user sees content before JS loads
• Social media previews — <meta> tags resolved at render time

ng add @angular/ssr
ng build && node dist/server/server.mjs

Pitfalls:

• No window, document, localStorage on the server — guard with isPlatformBrowser()
• State transfer (TransferState) prevents double HTTP requests

In Angular 17+, SSR is a first-class option available in ng new.

ActivatedRoute gives you information about the currently active route — params, query params, data, URL.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // Snapshot (one-time read)
  const id = this.route.snapshot.paramMap.get('id');

  // Observable (reacts to param changes without recreating component)
  this.route.paramMap.subscribe(params => {
    const id = params.get('id');
    this.loadUser(id);
  });

  // Query params
  this.route.queryParams.subscribe(qp => this.page = qp['page']);
}

Use the Observable approach when navigating between the same route (e.g., paging) to avoid recreating the component.

navigate(commands, extras?) — navigates using an array of commands (relative navigation supported):

this.router.navigate(['/user', userId, 'profile'], { queryParams: { tab: 'settings' } });
this.router.navigate(['../sibling'], { relativeTo: this.route });  // relative

navigateByUrl(url) — navigates using an absolute URL string:

this.router.navigateByUrl('/user/42?tab=settings');

Prefer navigate() — it’s more composable and supports relative navigation. Use navigateByUrl() when you have a full URL string (e.g., from redirect).

canDeactivate prevents navigation away from a route — useful to warn users about unsaved changes.

export const unsavedChangesGuard: CanDeactivateFn<EditComponent> = (component) => {
  if (component.hasUnsavedChanges()) {
    return confirm('You have unsaved changes. Leave anyway?');
  }
  return true;
};

// Route
{ path: 'edit/:id', component: EditComponent, canDeactivate: [unsavedChangesGuard] }

The guard can return boolean, UrlTree, or Observable<boolean> (for async confirmation dialogs).

ngTemplateOutlet renders a TemplateRef at a specific location, optionally with a context object.

<!-- Define template -->
<ng-template #loading>
  <div class="spinner">Loading...</div>
</ng-template>

<ng-template #userCard let-user="user">
  <div>{{ user.name }}</div>
</ng-template>

<!-- Use template -->
<ng-container *ngTemplateOutlet="loading"></ng-container>
<ng-container *ngTemplateOutlet="userCard; context: { user: currentUser }"></ng-container>

Useful for reusable template fragments within the same component, or passing templates as @Input() to child components for customization.

Standalone components (Angular 14+) don’t belong to any NgModule. They declare their own dependencies in their imports array — making them self-contained and more tree-shakable.

@Component({
  standalone: true,
  selector: 'app-profile',
  imports: [CommonModule, RouterLink, DatePipe, UserCardComponent],
  template: `...`,
})
export class ProfileComponent {}

In Angular 17+, standalone is the default when using ng generate. The entire app can be standalone:

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes), provideHttpClient()]
});

TestBed is Angular’s primary testing utility that creates an Angular testing module environment.

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent],  // standalone component
    }).compileComponents();

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();  // trigger ngOnInit + initial CD
  });

  it('should increment count', () => {
    component.increment();
    fixture.detectChanges();
    const p = fixture.nativeElement.querySelector('p');
    expect(p.textContent).toContain('1');
  });
});

fakeAsync wraps a test in a fake async zone where time is controlled manually. tick(ms) advances the virtual clock.

it('should show result after delay', fakeAsync(() => {
  component.startLoading();
  tick(2000);  // advance 2 seconds
  fixture.detectChanges();
  expect(component.loaded).toBe(true);
}));

// For promises/microtasks
it('should resolve promise', fakeAsync(() => {
  let result = '';
  Promise.resolve('hello').then(v => result = v);
  flushMicrotasks();  // flush pending microtasks
  expect(result).toBe('hello');
}));

Alternative: async/await with fixture.whenStable() for real async.

ngDoCheck fires on every change detection cycle — even when Angular doesn’t detect any changes through its normal mechanism. It runs after ngOnChanges each cycle.

Use it to detect changes Angular can’t (deeply mutated objects, custom comparison):

ngDoCheck() {
  if (this.items !== this.prevItems) {
    this.prevItems = [...this.items];
    this.doSomething();
  }
}

Caution: Runs very frequently — keep logic minimal and fast. It’s commonly used by the Angular team to implement ngFor, ngIf, etc. internally. For most app code, prefer ngOnChanges or immutable data patterns with OnPush.

ngAfterViewInit fires once after the component’s view (template) and all child views are fully initialized and available in the DOM.

Common use cases:

• Access @ViewChild elements (first available here, not in ngOnInit)
• Focus an input element
• Initialize third-party libraries that need DOM (Chart.js, etc.)
• Measure element dimensions

@ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;

ngAfterViewInit() {
  const ctx = this.canvasRef.nativeElement.getContext('2d');
  new Chart(ctx, this.chartConfig);
}

Important: Don’t modify state that affects the template in ngAfterViewInit — it triggers ExpressionChangedAfterItHasBeenCheckedError. Use setTimeout(()=> ..., 0) or queueMicrotask if needed.

DestroyRef (Angular 16+) is an injectable that lets you register cleanup callbacks when a component/service/directive is destroyed — without implementing OnDestroy.

constructor() {
  const destroyRef = inject(DestroyRef);
  destroyRef.onDestroy(() => {
    console.log('Cleanup!');
    this.subscription.unsubscribe();
  });
}

Powers takeUntilDestroyed():

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

data$ = this.service.items$.pipe(takeUntilDestroyed());

No need to manually manage a Subject + ngOnDestroy pattern anymore.

routerLinkActive adds a CSS class to an element when its associated routerLink matches the current URL:

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
</nav>

By default it also matches child routes (e.g., /about/team also activates /about). To require exact match:

<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>

Use #rla="routerLinkActive" template variable to check .isActive programmatically.

TransferState prevents double HTTP requests when using Angular Universal (SSR):

1. Server renders the page and makes HTTP calls
2. Server serializes the response data into the HTML as a <script> tag
3. Browser reads that data from the DOM instead of making a new request

// Modern approach (Angular 16+): automatic with HttpClient
// In app.config.server.ts:
provideClientHydration()
// This automatically transfers HttpClient state — no manual TransferState needed

For custom state:

const key = makeStateKey<User[]>('users');
// Server: state.set(key, users)
// Browser: const users = state.get(key, null)

inject() is a function that retrieves a dependency from the current injection context — without needing constructor parameters.

// In component field initializer (Angular 14+)
export class MyComponent {
  private userService = inject(UserService);
  private router = inject(Router);
}

// In functional guards
export const authGuard: CanActivateFn = () => {
  return inject(AuthService).isLoggedIn();
};

// In class field initializer — enables takeUntilDestroyed()
data$ = inject(UserService).getUsers().pipe(
  takeUntilDestroyed()
);

Benefits over constructor: works in standalone functions (guards, resolvers), enables inline initialization, cleaner for composable utilities. Modern Angular style prefers inject().