If you have 10 years of Angular experience, interviewers won't ask you what a component is. They'll dig into architecture decisions, performance trade-offs, RxJS internals, state management patterns, and how you lead teams  because that's what a principal or staff-level Angular engineer is expected to own.

This guide covers the exact questions you'll face in a senior Angular interview, with the depth of answers that actually impress experienced interviewers.

What Interviewers Really Expect at 10 Years

A decade of experience means you should go beyond knowing the API  you should be able to justify why. Expect questions across three dimensions:

• Technical depth  deep framework internals, RxJS, Signals, DI, compilation
• Architecture & system design  scalable app structure, micro-frontends, SSR
• Leadership & soft skills  mentoring, code reviews, owning tech debt, pushing back on product decisions

Interviewers often set the tone early: Since you've said you know Angular really well, can I ask hard questions and expect strong answers? they're testing self-awareness as much as technical knowledge.

1. Change Detection & Zone.js Internals

Q: How does Angular's change detection work under the hood? When would you bypass Zone.js entirely?

Angular's change detection tracks when the UI needs to re-render. By default, it uses Zone.js, which monkey-patches all async browser APIs  setTimeout, Promise, addEventListener, XHR  and notifies Angular to walk the entire component tree from root to leaf checking for changes.

At 10 years, you should know:

• The component tree is checked top-down in a single pass
• OnPush strategy only re-checks when input references change or an async observable emits
• ChangeDetectorRef.detach() removes a component from the tree entirely  useful for real-time data components
• Angular 17+ Signals provide a zone-free reactive model where only the specific signal consumer re-renders

constructor(private ngZone: NgZone) {}

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    this.map.on('mousemove', (e) => {
      // runs hundreds of times per second — no CD triggered
      this.updateCoords(e.latlng);
    });
  });
}

Follow-up interviewers ask: "How would you debug excessive change detection cycles?"  Use Angular DevTools profiler, identify which component subtrees are re-rendering unnecessarily, apply OnPush + trackBy + async pipe.

Q: What is the difference between JIT and AOT compilation? Why does AOT matter in production?

JIT (Just-in-Time): Templates are compiled in the browser at runtime  slower startup, larger bundle, but faster dev iteration. AOT (Ahead-of-Time): Templates compile at build time  the browser receives pre-compiled, optimized JS with faster startup, smaller bundle, and template errors caught at build time rather than runtime.

At 10 years, you add:

• AOT enables tree-shaking of unused Angular framework code
• Angular Ivy (default since v9) made AOT the default for both dev and prod
• Incremental DOM under Ivy reduces memory allocation compared to the old View Engine's virtual DOM approach

2. RxJS & Reactive Programming

Q: When would you use switchMap vs concatMap vs mergeMap vs exhaustMap?

This is a classic senior filter question. Each handles inner observable subscription differently:

A 10-year engineer adds: "I've used exhaustMap on form submits to prevent double POST requests — it's a one-liner fix for a bug junior devs spend days debugging."

Q: How do you prevent memory leaks from RxJS subscriptions in Angular?

There are multiple valid approaches — interviewers want to know you understand the trade-offs:

• async pipe :best default; auto-unsubscribes when component destroys
• takeUntilDestroyed() (Angular 16+) : inject DestroyRef, cleanest modern approach
• takeUntil(this.destroy$) with a Subject + ngOnDestroy  older but widely used
• take(1)  for one-shot observables like single HTTP calls

// Modern Angular 16+ approach
private destroyRef = inject(DestroyRef);

ngOnInit() {
  this.data$.pipe(
    takeUntilDestroyed(this.destroyRef)
  ).subscribe(data => this.data = data);
}

Avoid: Storing subscriptions in arrays and manually looping to unsubscribe  it's a code smell at senior level.

Q: What is the difference between Subject, BehaviorSubject, ReplaySubject, and AsyncSubject?

"I use BehaviorSubject in services to hold application state  it acts like a mini-store. The .value getter is convenient but I caution junior devs not to over-rely on it synchronously."

3. Dependency Injection

Q: What are the different DI providers in Angular and when do you use each?

• providedIn: 'root' : app-wide singleton, tree-shakable (preferred default)
• providedIn: 'any' : separate instance per lazy-loaded module
• Module-level providers: [] : scoped to that module and its children
• Component-level providers: [] : new instance per component instance (great for stateful form wizards)
• inject() function : use DI outside constructors, in factory functions, functional guards, and interceptors

Interview trap: "What happens if you provide the same service in both root and a lazy module?" → The lazy module gets its own instance, breaking singleton behavior. This is a real production bug that's hard to trace.

Q: Explain hierarchical dependency injection. How does it work in practice?

Angular has a tree of injectors mirroring the component tree. When a component requests a token, Angular walks up the injector tree until it finds a provider. This means:

• Child components inherit parent services automatically
• Providing a service at the component level shadows the higher-level one
• @SkipSelf() tells Angular to skip the current injector and look up the tree
• @Host() limits resolution to the current component's host element injector

Practical use: A multi-step form wizard where each step is a child component — provide a FormWizardService at the wizard component level so all steps share the same instance without polluting the root injector.

4. Performance Optimization

Q: How would you optimize an Angular app's initial load time for Core Web Vitals?

A 10-year answer is systematic, not just a list of buzzwords:

1. Lazy load feature modules / standalone routes  only load what the current route needs
2. Preloading strategy  PreloadAllModules or custom strategy to preload likely routes on idle
3. SSR with Angular Universal + Hydration  ship pre-rendered HTML for LCP wins
4. @defer blocks (Angular 17+)  defer heavy components until viewport or interaction
5. Bundle analysis  webpack-bundle-analyzer or ng build --stats-json to find bloat
6. NgOptimizedImage directive  automatic lazy loading, srcset, and LCP prioritization
7. HTTP/2 + brotli compression on the server side

Q: An Angular app with a 50,000-item list is causing browser freezes. Walk me through your full optimization approach.

A senior engineer gives a layered answer:

• Virtual scrolling via @angular/cdk/scrolling  only render visible items in the DOM
• trackBy function in *ngFor to avoid full list re-renders on reference changes
• OnPush change detection on list item components
• Web Workers for any heavy data transformation off the main thread
• Pagination or infinite scroll at the data level before it ever reaches the component

Q: What is @defer in Angular 17+ and how does it change lazy loading?

@defer is a template-level declarative lazy loading mechanism. Unlike route-level lazy loading, @defer defers individual components within a template based on triggers:

@defer (on viewport) {
  <heavy-analytics-chart />
} @placeholder {
  <div class="skeleton-loader"></div>
} @loading (minimum 300ms) {
  <spinner />
} @error {
  <p>Failed to load chart.</p>
}

Triggers include: on idle, on viewport, on interaction, on hover, on timer(2s), and when condition. Before @defer, you'd hack this with IntersectionObserver + dynamic component loading. Now it's first-class syntax.

5. State Management

Q: How do you decide between NgRx, Akita, Signals + Services, or a simple BehaviorSubject store?

"I start with Signals and simple services. I only reach for NgRx when the team is 5+ engineers, state is truly global and complex, or we need time-travel debugging for a critical business workflow."

Q: Explain NgRx Effects. What problem do they solve and what's the most common production mistake?

Effects handle side effects async operations like HTTP calls, WebSocket connections, or analytics events  outside of reducers, which must stay as pure functions.

loadProducts$ = createEffect(() =>
  this.actions$.pipe(
    ofType(ProductActions.loadProducts),
    switchMap(() =>
      this.productService.getAll().pipe(
        map(products => ProductActions.loadProductsSuccess({ products })),
        catchError(error => of(ProductActions.loadProductsFailure({ error })))
      )
    )
  )
);

Most common production mistake: Forgetting catchError inside the switchMap. If the error reaches the outer pipe, the effect completes permanently and never handles actions again. This is a silent production bug that's extremely hard to reproduce.

6. Architecture & Design Patterns

Q: How would you structure a large-scale Angular application to stay maintainable over 3–5 years?

• Feature-based folder structure (not type-based)  features are self-contained with their own components, services, and routes
• Lazy-loaded feature modules / standalone components to keep the initial bundle small
• Smart/dumb component pattern  containers handle state, presentational components are pure and use OnPush universally
• Shared library layer  reusable UI components, utilities, and models in a libs folder (especially in Nx monorepos)
• Strong module boundaries  enforced via ESLint rules or Nx project graph to prevent circular dependencies

Q: How would you implement a micro-frontend architecture with Angular?

The standard approach uses Webpack Module Federation via @angular-architects/module-federation:

• A shell app that owns routing and shared layout
• Remote apps that expose components via ModuleFederationPlugin
• The shell dynamically loads remotes at runtime using loadRemoteModule()

Key challenges: shared dependency versioning, cross-boundary state via an event bus (not direct service calls), and independent deployment via manifest URLs. Honest senior answer: "Micro-frontends solve an organizational problem, not a technical one. I push back when teams want them for purely technical reasons  the operational overhead is significant."

Q: How would you migrate a large NgModule-based app to standalone components without breaking production?

The key is incremental migration, not a big-bang rewrite:

1. Enable standalone APIs per component, not all at once  start with leaf components
2. Use bootstrapApplication() for the root app
3. Replace module imports with direct imports: [] on standalone components
4. Gradually retire NgModule declarations module-by-module
5. Use Angular's automatic migration schematic: ng generate @angular/core:standalone

7. Angular Signals

Q: What are Angular Signals and how do they change the reactivity model compared to RxJS?

Signals (stable in Angular 17+) are synchronous, fine-grained reactive primitives that don't rely on Zone.js. Unlike RxJS observables, Signals are always synchronous and don't require subscription management:

// Signal-based counter
count = signal(0);
doubled = computed(() => this.count() * 2);

increment() {
  this.count.update(c => c + 1);
}

// Template
<p>Count: {{ count() }}</p>
<p>Doubled: {{ doubled() }}</p>

When to use Signals vs RxJS:

8. Testing at Scale

Q: How do you approach testing strategy for a team of 15+ Angular developers?

• Testing pyramid  lots of unit tests (component logic, pipes, services), fewer integration tests, minimal E2E
• TestBed optimization  avoid compileComponents() in beforeEach when not needed; use NO_ERRORS_SCHEMA carefully to isolate units
• Cypress or Playwright for E2E  covering critical user journeys only
• Code coverage gates in CI  measuring branch coverage, not just line coverage
• MockStore for NgRx use provideMockStore({ initialState }) to control state directly in tests

Q: How do you test a component that uses HttpClient and an NgRx store?

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [
    provideMockStore({ initialState: { products: [] } }),

If you've been building Angular apps for any amount of time, you've run into the need to show or hide elements based on some condition  a loading spinner, an error message, a user-specific button. Angular gives you powerful tools to handle all of this directly in your templates. 

In this guide, we'll walk through the classic *ngIf directive, the modern @if block syntax introduced in Angular 17, and how ngClass fits into the picture.

What Is *ngIf and Why Does It Matter?

*ngIf is a structural directive meaning it physically adds or removes elements from the DOM, not just hides them with CSS. That's a meaningful difference. When an element is removed from the DOM, Angular also destroys its component tree, freeing up memory. This makes *ngIf more performant than display: none for large or deeply nested UIs.

<p *ngIf="isLoggedIn">Welcome back, {{ username }}!</p>

If isLoggedIn is false, that <p> tag doesn't exist in the DOM at all  Angular never renders it.

Handling the Else Case

The else branch uses an <ng-template> with a template reference variable. It's a little verbose, but it gets the job done:

<div *ngIf="isLoading; else content">Loading...</div>
<ng-template #content>
  <p>Data loaded successfully!</p>
</ng-template>

The #content reference links the template to the else clause. One thing to watch out for: if that reference doesn't exist or is misspelled, Angular throws an NG01352 error at runtime. Always double-check your template variable names.

Simulating else if With *ngIf

Angular's *ngIf doesn't have a native else if. The workaround is to nest another *ngIf inside an <ng-template>:

<ng-container *ngIf="condition1; then block1 else block2"></ng-container>

<ng-template #block1>Content for condition1</ng-template>
<ng-template #block2>
  <div *ngIf="condition2">Content for condition2</div>
  <div *ngIf="!condition2">Fallback content</div>
</ng-template>

It works, but it gets messy fast. That's exactly the pain point Angular 17 addresses head-on.

Angular 17+ : Enter @if, @else if, and @else

Angular 17 shipped a completely revamped control flow syntax built directly into the compiler. No more *ngIf. No more <ng-template>. Just clean, readable blocks that look and feel like real control flow:

@if (user.role === 'admin') {
  <button>Edit Settings</button>
} @else if (user.role === 'editor') {
  <button>Draft Post</button>
} @else {
  <p>Guest users cannot perform actions.</p>
}

This is a massive improvement in developer experience. Native @else if support alone eliminates a ton of awkward nesting.

Before vs. After

Type Narrowing Is Now Built In

One underrated benefit of the new syntax is TypeScript-aware type narrowing. Inside an @if block, Angular's compiler knows the type has been checked:

// component.ts
user: User | null = null;

// template
@if (user) {
  <p>{{ user.name }}</p>  <!-- TypeScript knows user is non-null here -->
}

No more ?. safe navigation operators sprinkled everywhere just to avoid null errors.

Pairing with @for and @empty

The new control flow syntax doesn't stop at conditionals. It pairs naturally with @for loops and an @empty block for handling empty lists:

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <p>No items found.</p>
}

Previously, you'd combine *ngFor with an *ngIf check for empty state. Now it's a single, self-contained block.

Dynamic Styling with ngClass

While *ngIf and @if control whether an element exists, ngClass controls how it looks. They complement each other well:

<!-- Apply a single class conditionally -->
<div [ngClass]="{ 'active': isActive }">...</div>

<!-- Apply multiple classes based on different conditions -->
<div [ngClass]="{ 'success': isSuccess, 'error': hasError }">...</div>

A common real-world pattern: use @if to decide if a component renders, and ngClass to handle its visual states once it does.

Common Real-World Use Cases

• Loading states : Show a spinner while data fetches, swap it for content when ready
• Error handling : Display alert banners only when an error flag is set
• Authentication gates : Show Login/Logout buttons based on session state
• Role-based UI : Render different controls for admins, editors, and viewers using @else if

Best Practices Worth Following

Keep complex logic out of templates. If your condition has more than one or two checks, move it to a getter in the component:

// component.ts
get isUserValid(): boolean {
  return this.user && this.user.isActive;
}

// template
<div *ngIf="isUserValid">...</div>

Use <ng-container> when you need a conditional wrapper that shouldn't add a real DOM node. It's invisible in the rendered output.

Start migrating to @if today. Angular plans to phase out structural directives in favor of the new block syntax. There's an automatic migration command:

ng generate @angular/core:control-flow

This migrates your entire project's *ngIf, *ngFor, and *ngSwitch to the new syntax in one shot.

Troubleshooting: NG01352 Error

If Angular throws NG01352, it can't find the <ng-template> referenced in your *ngIf else clause. The fix is usually one of two things:

• The #templateName variable is misspelled or missing
• The template is defined inside another structural directive  Angular can't reach it from there

<!-- This breaks if #missingTemplate doesn't exist -->
<div *ngIf="condition; else missingTemplate"></div>

Quick Reference

Whether you're maintaining an older codebase or starting fresh, understanding both *ngIf and the new @if syntax gives you the full picture of Angular's conditional rendering story. The new block syntax is clearly the direction Angular is heading  cleaner templates, better type safety, and noticeably faster rendering. Start with the migration command, and you'll be surprised how quick the switch is.

Further Reading:

• Angular Control Flow Official Docs
• NgIf Complete Guide — Angular University
• Angular ngClass Docs

Angular interviews can feel overwhelming  there's a lot to cover and interviewers love going deep. The good news is that most questions circle around the same core ideas. 

Work through this list, understand the why behind each answer, and you'll walk in confident.

Core Angular Concepts

1. What is the difference between AngularJS and Angular?

This one comes up a lot, especially if your resume mentions both. AngularJS (v1.x) was built in the early days of single-page apps  it used JavaScript, a controller/scope model, and MVC architecture.

 Angular (v2 and beyond) is essentially a completely different framework that just kept the name. It was rewritten in TypeScript, shifted to a component-based model, and introduced the Ivy compiler which made apps significantly faster and smaller. 

If an interviewer asks this, they're checking whether you know Angular has a history, not just a present.

2. Explain the component lifecycle hooks.

Think of lifecycle hooks as Angular tapping you on the shoulder and saying "hey, something just happened to your component want to do something about it?" They fire in this order:

• ngOnChanges :called first, whenever a bound @Input() value changes
• ngOnInit : your go-to hook for setup logic; runs once after the first ngOnChanges
• ngDoCheck : runs on every change detection cycle; use it carefully, it fires a lot
• ngAfterContentInit / ngAfterContentChecked: triggered after Angular projects external content via ng-content
• ngAfterViewInit / ngAfterViewChecked: triggered after the component's own view and all child views are fully rendered
• ngOnDestroy: your cleanup hook; always unsubscribe from observables here to avoid memory leaks

3. What is Dependency Injection (DI) in Angular?

DI sounds fancy but the idea is simple: instead of a class creating its own dependencies (like a service), Angular hands them over from the outside. This makes your code easier to test and swap out. You tell Angular a service is injectable with @Injectable(), and using providedIn: 'root' creates one shared instance across the whole app.

@Injectable({ providedIn: 'root' })

export class DataService {

  getData() { ... }

}

Directives & Templates

4. What is the difference between structural and attribute directives?

The easiest way to remember this: structural directives change the shape of the DOM (they add or remove elements), while attribute directives change the look or behavior of something already there.

• Structural : *ngIf removes an element from the DOM entirely; *ngFor stamps out multiple elements
• Attribute: ngClass adds CSS classes; ngStyle applies inline styles

5. How do you create a custom directive?

Say you want to highlight any element when the user hovers over it. Instead of writing that logic in every component, you create a directive once and reuse it anywhere. Here's a real example:

@Directive({ selector: '[appHighlight]' })

export class HighlightDirective {

  constructor(private el: ElementRef) {}



  @HostListener('mouseenter') onMouseEnter() {

    this.el.nativeElement.style.backgroundColor = 'yellow';

  }



  @HostListener('mouseleave') onMouseLeave() {

    this.el.nativeElement.style.backgroundColor = '';

  }

}

Drop it on any element with <p appHighlight>Hover over me</p> and it just works.

Data Binding & Component Communication

6. What are the types of data binding in Angular?

Data binding is how your component class and HTML template talk to each other. Angular gives you four ways to do it:

• Interpolation : {{ value }} simplest way to display data in the template
• Property binding: [property]="value"  pushes data from the class into a DOM property
• Event binding : (event)="handler()" listens for user actions and calls a method
• Two-way binding : [(ngModel)]="property"  keeps the input and the class in sync; needs FormsModule imported

7. How do parent and child components communicate?

Component communication is one of those topics that trips up junior developers but becomes second nature once you've built a few features.

• Parent → Child: Use @Input() to pass data down from the parent
• Child → Parent: Use @Output() withEventEmitter to send events back up
• Sibling / unrelated components: A shared service with a Subject or BehaviorSubject is your best friend here

RxJS & Observables

8. What is the difference between an Observable and a Promise?

Promises and Observables both handle async code, but they behave very differently under the hood. Here's a quick side-by-side:

9. How do you prevent memory leaks with observables?

Forgetting to unsubscribe is one of the most common bugs in Angular apps. The subscription keeps running even after the component is gone, wasting memory. Three solid ways to avoid this:

• Use the async pipe in your template  Angular automatically subscribes and unsubscribes for you
• Use takeUntil with a destroy subject  clean and works great for multiple subscriptions
• Use take(1) when you only need the first emitted value

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



ngOnInit() {

  this.dataService.getData()

    .pipe(takeUntil(this.destroy$))

    .subscribe(data => this.data = data);

}



ngOnDestroy() {

  this.destroy$.next();

  this.destroy$.complete();

}

10. How do you retry an HTTP request on failure?

Network requests fail sometimes. RxJS makes it easy to automatically retry before giving up  no manual loop needed.

this.http.get(url).pipe(

  retry(3),

  catchError(err => {

    console.error('Request failed after 3 retries', err);

    return throwError(() => err);

  })

).subscribe(data => console.log(data));

Advanced Topics

11. Explain Angular's change detection strategies.

Angular watches for changes in your app and updates the view accordingly. By default it's aggressive — it checks everything. But you can make it smarter:

• Default: Angular walks the entire component tree on every browser event, timer tick, or async call. Safe, but can be slow in large apps
• OnPush: Angular only re-checks the component when an @Input() reference changes, an internal event fires, or you manually call ChangeDetectorRef.markForCheck()

Switching your components to OnPush is one of the easiest wins for app performance, especially in component-heavy dashboards.

12. How does lazy loading work in Angular?

Nobody wants to download the entire app upfront. Lazy loading lets Angular fetch feature modules only when a user actually navigates to them, keeping the initial bundle small and load times fast.

// app-routing.module.ts

const routes: Routes = [

  {

    path: 'dashboard',

    loadChildren: () =>

      import('./dashboard/dashboard.module').then(m => m.DashboardModule)

  }

];

If you're using standalone components (Angular 15+), use loadComponent directly  no module needed:

{

  path: 'profile',

  loadComponent: () =>

    import('./profile/profile.component').then(c => c.ProfileComponent)

}

13. What is Angular Universal?

• Angular runs in the browser by default, which means search engine crawlers often see a blank page before JavaScript kicks in. 
• Angular Universal solves this with Server-Side Rendering (SSR)  the server builds the full HTML first, sends it to the browser, then Angular takes over. 
• The result is faster perceived load times and much better SEO. From Angular 17 onwards, SSR ships with the CLI out of the box when you run ng new --ssr.

Performance Optimization

14. How do you optimize *ngFor performance?

Without trackBy, Angular tears down and rebuilds the entire list whenever the data array changes  even if only one item changed. 

Add trackBy and Angular knows which items are new, updated, or removed, so it only touches what needs touching.

<div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>

trackById(index: number, item: any): number {

  return item.id;

}

15. What is the difference between pure and impure pipes?

This is a subtle but important distinction for performance:

• Pure pipes: Angular only reruns the pipe when the input value actually changes. This is the default and what you want 99% of the time
• Impure pipes :Angular reruns them on every change detection cycle, regardless of whether the input changed. They're powerful but can noticeably slow down your app if overused

Angular Signals (v16+)

16. What are Angular Signals and why do they matter?

Signals are Angular's newer approach to reactivity and honestly one of the most exciting recent additions. 

Instead of relying on Zone.js to detect changes across the whole app, a signal tracks exactly who depends on it and only notifies those dependents when its value changes.

 It's more predictable and more performant.

import { signal, computed, effect } from '@angular/core';



count = signal(0);

doubled = computed(() => this.count() * 2);



increment() {

  this.count.update(c => c + 1);

}

Signals pair perfectly with OnPush components and are the building blocks for Angular's upcoming Zoneless mode  so it's worth getting comfortable with them now.

New Control Flow Syntax (v17+)

17. What is Angular's new built-in control flow?

Angular 17 shipped a new template syntax that replaces the old structural directives. It's cleaner, easier to read, and adds some useful new features like the @empty block for empty lists. You'll start seeing this in most new codebases:

<!-- Replaces *ngIf -->

@if (isLoggedIn) {

  <app-dashboard />

} @else {

  <app-login />

}



<!-- Replaces *ngFor, with built-in empty state -->

@for (item of items; track item.id) {

  <li>{{ item.name }}</li>

} @empty {

  <li>No items found.</li>

}



<!-- Replaces ngSwitch -->

@switch (status) {

  @case ('active') { <span>Active</span> }

  @case ('inactive') { <span>Inactive</span> }

  @default { <span>Unknown</span> }

}

Testing

18. How do you test a component with dependencies?

The key to unit testing in Angular is isolation  you want to test the component, not its dependencies. Use TestBed to set up a minimal testing environment and swap real services with mock versions:

beforeEach(() => {

  TestBed.configureTestingModule({

    declarations: [MyComponent],

    providers: [{ provide: MyService, useClass: MockService }]

  });

  fixture = TestBed.createComponent(MyComponent);

});



it('should display fetched data', () => {

  fixture.detectChanges();

  const compiled = fixture.nativeElement;

  expect(compiled.querySelector('h1').textContent).toContain('Hello');

});

Real-World Scenarios

19. How do you implement a debounced search input?

Firing an API call on every single keystroke is a quick way to hammer your backend. A debounced search waits until the user pauses typing before sending the request. 

switchMap is the critical piece here  it cancels the previous in-flight request if the user types again, so you never process stale results.

searchTerm = new FormControl('');



ngOnInit() {

  this.searchTerm.valueChanges.pipe(

    debounceTime(300),

    distinctUntilChanged(),

    switchMap(term => this.searchService.search(term))

  ).subscribe(results => this.results = results);

}

20. How do you add authentication headers using an HTTP interceptor?

Rather than manually adding an auth token to every single HTTP call, interceptors let you do it once in one place. Every outgoing request passes through your interceptor automatically.

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}



  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const token = this.authService.getToken();

    if (token) {

      const authReq = req.clone({

        setHeaders: { Authorization: `Bearer ${token}` }

      });

      return next.handle(authReq);

    }

    return next.handle(req);

  }

}

Wire it up in your providers array: { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }. The multi: true flag is important  it tells Angular you're adding to a list of interceptors, not replacing them.

Common Pitfalls

21. Why does ngModel require FormsModule?

ngModel isn't a built-in HTML attribute  it's an Angular directive that lives inside FormsModule. If you forget to import FormsModule in your module (or in a standalone component's imports array), Angular simply won't recognize it and you'll get a template parse error. It's a small thing but it trips up a surprising number of developers.

22. How do you fix ExpressionChangedAfterItHasBeenCheckedError?

This error shows up when something in your code changes a binding value after Angular has already finished checking it for that cycle. It only appears in development mode, but it's Angular warning you about a real design issue. Here's how to deal with it:

• Move the state change into ngAfterViewInit and immediately call ChangeDetectorRef.detectChanges() to trigger another check
• Wrap the change in setTimeout() to push it to the next event loop tick  works but treat it as a last resort
• The cleanest fix is to restructure your code so the value is set before change detection starts, ideally in ngOnInit

Before You Walk Into That Interview

Technical knowledge only gets you so far  interviewers also want to see how you think. A few things worth focusing on in your last few days of prep:

• RxJS operators: get comfortable with map,filter, switchMap,mergeMap, combineLatest, catchError, and debounceTime; know when to use each
• Signals vs. RxJS: understand the difference and when one makes more sense than the other
• Change detection: be able to explain Default vs OnPush and why Signals are moving Angular away from Zone.js
• Standalone components: know how to bootstrap an app and declare imports without NgModules
• Build something small: a search-as-you-type feature, a simple auth flow, or a todo list will make these concepts stick far better than just reading about them

lets discuss 40 + frequently asked angular and JavaScript interview questions  and answers

JavaScript Interview Questions

1. What are closures in JavaScript?

• Closures allow an inner function to remember variables from its outer function even after the outer function has finished executing.

function outer() {

  let count = 0;

  return function inner() {

    count++;

    return count;

  };

}

const counter = outer();

console.log(counter()); // 1

console.log(counter()); // 2

• Closures power callbacks, event listeners, and async programming all of which are used in Angular.

2. Difference between var, let, and const?

• var : functionscoped, can be redeclared.
• let : blockscoped, reassignable.
• const: blockscoped, cannot be reassigned.

3. What is event delegation?

• Instead of attaching event listeners to multiple child elements, you attach one to the parent. The event bubbles up and gets handled at the parent level.

•  Saves memory and improves performance—super important in large apps.

4. Difference between == and ===?

• ==  loose equality (performs type conversion).
• ===  strict equality (compares type + value).
• Always use === to avoid bugs.

5. What is the event loop in JavaScript?

• The event loop is what makes JavaScript asynchronous. It constantly checks the call stack and the callback queue, allowing nonblocking code execution.

6. What are Promises and async/await?

• Promise :represents a future value (resolved or rejected).
• async/await: syntactic sugar for writing cleaner asynchronous code.

async function fetchData() {

  const res = await fetch('/api/data');

  return res.json();

}

7. What is hoisting?

• Hoisting means JavaScript moves variable and function declarations to the top of their scope before code execution.

8. Difference between null and undefined?

• null : intentional “no value.”
• undefined : variable declared but not assigned.

9. What are arrow functions, and how are they different?

• Arrow functions don’t have their own this. They inherit it from their surrounding scope.
• Useful in Angular callbacks and RxJS streams.

10. What is the difference between synchronous and asynchronous JavaScript?

• Synchronous : one task at a time.
• Asynchronous : tasks can run in the background (timers, API calls).

11. What is a callback function?

• A callback is a function passed as an argument and executed later.

12. What is a prototype in JavaScript?

• Every JS object has a prototype, which enables inheritance. Angular’s TypeScript classes compile down to prototypebased JS.

13. What are higherorder functions?

• Functions that take other functions as arguments or return them.
• Examples: map(), filter(), reduce().

14. Explain deep copy vs shallow copy.

• Shallow copy: copies only toplevel properties.
• Deep copy  means copies nested objects as well.

Angular Interview Questions

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

• AngularJS (1.x) :JavaScriptbased, MVC, slower.
• Angular (2+) :TypeScriptbased, componentdriven, faster.

16. What are the main building blocks of Angular?

• Modules
• Components
• Templates
• Directives
• Services
• Pipes

17. What is Dependency Injection in Angular?

DI means Angular creates and injects services instead of you creating them manually. Makes code testable and modular.

18. Explain Angular data binding.

• Interpolation : {{ name }}
• Property binding : [src]="imageUrl"
• Event binding :(click)="onClick()"
• Twoway binding : [(ngModel)]="username"

19. What are lifecycle hooks in Angular?

• ngOnInit() : runs after component loads
• ngOnChanges() : detects input property changes
• ngOnDestroy() :cleanup before component is destroyed

for more details on 8 life cycle hooks angular 

20. How do Angular components communicate?

• @Input() - Parent - Child
• @Output() -Child -Parent
• Services with RxJS :Share data across components

21. What are Angular directives?

• Structural : *ngIf, *ngFor
• Attribute : [ngClass], [ngStyle]

22. What is Angular Routing?

• Routing allows navigation between views. Features include:
• Route parameters (:id)
• Lazy loading
• Route guards

23. What are Observables in Angular?

• Observables (via RxJS) handle async data streams (HTTP requests, events, sockets).
• Unlike promises, they can emit multiple values over time.

24. What is Angular Ivy?

• Ivy is the rendering engine that makes Angular apps smaller and faster.

25. What is Angular Universal?

• It enables ServerSide Rendering (SSR) for SEO and performance.

26. How does Angular handle forms?

• Templatedriven forms : simpler.
• Reactive forms:  more control, better validation.

27. What are Angular Pipes?

• Transform data in templates. Examples: date, currency, async.
• You can also build custom pipes.

28. What is lazy loading in Angular?

• Loads modules only when needed, reducing initial bundle size.

29. What are Guards in Angular routing?

• Guards like CanActivate and CanDeactivate control route access.

30. What is ViewEncapsulation?

• Controls how CSS styles are applied:
• Emulated (default)
• None
• ShadowDOM

31. What are standalone components in Angular 17+?

• Standalone components don’t need NgModules, making apps simpler.

32. What are Angular Signals?

• Signals are new reactive primitives for managing state, simpler than RxJS in some cases.

33. What are Angular Zones?

• NgZone tracks async tasks and triggers change detection.

34. What is AheadofTime (AOT) compilation?

• AOT compiles Angular templates at build time & faster runtime performance.

35. Difference between templatedriven and reactive forms?

• Template driven: simple, less code.
• Reactive: scalable, great for complex forms.

36. How do you improve performance in Angular apps?

• Lazy loading
• OnPush change detection
• TrackBy in *ngFor
• Caching API responses

37. Difference between Subject, BehaviorSubject, and ReplaySubject in RxJS?

• Subject: plain multicast observable.
• BehaviorSubject: holds last value.
• ReplaySubject: replays multiple past values.

38. How do you handle state management in Angular?

• RxJS services
• NgRx
• Akita
• Signals (newer alternative)

39. Difference between Reactive and Imperative programming?

• Reactive: declarative, uses streams (RxJS, signals).
• Imperative : stepbystep instructions.

40. How do you make Angular apps SEOfriendly?

• Angular Universal (SSR)
• Prerendering
• Meta tags
• Lazyloaded images

•  We all know that == is equality operator is used to compare two values in JavaScript.
• === operator is strict equality operator
• Both == & === are used to compare values in JavaScript. then what is the difference between == and === lets discuss in detail
• == compares two values by converting them to same data types, 10 == ''10" will be true because string type of 10 converted in to number.
• === compares two values without converting them to same data type. 10 === "10"
• Use our JavaScript compiler to test your snippets
  

Difference between == and === in Javascript

1.  == ( loose Equality)

Remember these special cases:

When to use which operator:

A Brief Tutorial on Using ApexCharts with Angular

Quick Installation

1. Install dependencies:

   npm i apexcharts ng-apexcharts
   

2. Import Module (app.module.ts)

Basic Line Chart Example

Component Template (app.component.html)

<apx-chart 
  [series]="chartOptions.series" 
  [chart]="chartOptions.chart"
  [xaxis]="chartOptions.xaxis" 
  [title]="chartOptions.title">
</apx-chart>

Component Class (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  chartOptions = {
    series: [{ data: [10, 20, 30, 40] }],
    chart: { type: 'line' },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
    title: { text: 'Basic Line Chart' }
  };
}

Key Features

1. Dynamic Updates

   updateChart() {
     const newData = this.chartOptions.series[0].data.map(() => 
       Math.floor(Math.random() * 100)
     );
     this.chartOptions = { ...this.chartOptions, series: [{ data: newData }] };
   }
   

2. Mixed Chart Types – Ability to use multiple chart types in one visualization.

Example Links

Basic Demo: Pie Chart

chartOptions = {
  series: [44, 55, 13],
  chart: { type: 'pie', width: 380 },
  labels: ['Team A', 'Team B', 'Team C']
};

Common Configurations

Styling

chartOptions = {
  chart: { foreColor: '#333' }, // Text color
  colors: ['#4CAF50', '#E91E63'], // Data colors
  grid: { borderColor: '#e0e0e0' } // Grid lines
};

Tooltip Customization

tooltip: {
  theme: 'dark',
  x: { show: false }, // Hide x-axis tooltip
  y: { formatter: (val: number) => `${val} users` } // Custom label
}

Tips for Troubleshooting

1. Chart Not Rendering?

   • Make sure NgApexchartsModule is imported.
   • Ensure there are no typos with option properties (e.g., xaxis vs xAxis).

2. Data Not Updating?

   • Assign the entire chartOptions object to enable Angular change detection.

3. Performance Issues?

   • Use ChangeDetectionStrategy.OnPush for optimization.
   • Debounce quick updates usingrxjs/debounceTime .

Why ApexCharts?

Free & Open Source

• MIT Licensed

Advanced Features

• Chart Annotations
• Data Labels
• Brush Charts

Native Angular Support

• Ready-to-use code snippets

For more advanced features like annotations, data labels, brush charts, and others, check out the ApexCharts Documentation.

A JavaScript variable is typically created using one of three keywords: var, let, or const. Each behaves differently in terms of scope, hoisting, and mutability, though they all might function very similarly. This article breaks down the differences between these keywords in simple terms so that you can write cleaner and more secure code

1. var: The Old Legacy Variable Declaration

Scope: Function Scope

• Variables declared with var are function scoped (or globally scoped if defined outside a function).
• They're accessible from anywhere within the function where they are defined.

Example:

function exampleVar() {
 if (true) {
  var x = 10;
 }
 console.log(x); // 10 (not limited to the block)
};

Hoisting

• var declarations are hoisted to the top of the containing function and initialized with undefined.
• This can lead to unexpected behavior if not taken into account.

console.log(y); // undefined (no error)
var y = 5;

Redeclaration and Reassignment

• var allows redeclaration and reassignment:

var z = 1;
var z = 2; // No error
z = 3;     // Reassignment allowed

Drawbacks

• No block scoping: Variables leak into blocks like loops or conditionals.
• Prone to bugs: May cause unintended side effects from hoisting and redeclaration.

2. let: The Modern Block-Scoped Variable

Block-Level Scope

• let variables are block scoped: they only exist within {} like loops, conditionals, or function bodies.
• Safer and more predictable than var.

Example:

function exampleLet() {
 if (true) {
  let a = 20;
  console.log(a); // 20
 }
 console.log(a); // ReferenceError: a is not defined
}

Hoisting and the Temporal Dead Zone (TDZ)

• let declarations are hoisted but not initialized.
• Accessing them before declaration results in ReferenceError.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 5;

Reassignment and Redeclaration

• let allows reassignment but not redeclaration.

let c = 10;
c = 20; // Allowed
let c = 30; // SyntaxError: Identifier 'c' has already been declared

3. const: Constants for Immutable Values

Scope: Like let, Block Scoped

• Variables created with const are block scoped, meaning they can only be accessed within their defining block.
• They cannot be reassigned after initialization.

Example:

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable

Immutable ≠ Unchangeable Values

• With const, you cannot reassign values, but you can mutate them.
• Objects and arrays declared with const can have their properties/methods altered.

const person = { name: "Alice" };
person.name = "Bob"; // Valid
person = { name: "Charlie" }; // TypeError (reassignment not allowed)

Hoisting and the Temporal Dead Zone (TDZ)

• Similar to let, const declarations are also hoisted and trigger the TDZ.

Key Differences Summary

When to Use Each

1. const (Recommended):

   • For values that shouldn’t be reassigned (e.g., configuration objects, API keys).
   • Used by default unless reassignment is needed.

2. let:

   • When a variable requires reassignment (e.g., loop counters, state changes).
   • More robust than var with block scope.

3. var:

   • Rarely needed in modern JavaScript. Use only in legacy projects or specific cases.

Common Mistakes

Slipping into Global Variable Declarations

function badPractice() {
 for (var i = 0; i < 5; i++) { /*... */ }
 console.log(i); // 5 (leaked outside loop)
}

Fix: Use let for block scoping.

Issues Related to TDZ

let greeting = "Hello";
if (true) {
 console.log(greeting); // ReferenceError (TDZ)
 let greeting = "Hi";
}

Fix: Define variables at the top of their scopes.

Misunderstandings of const’s Immutability

const arr = [1, 2];
arr.push(3); // Valid (array contents changed)
arr = [4, 5]; // TypeError (reassignment not allowed)

Best Practices

1. Use const by default, and let only when reassignment is necessary.
2. Avoid var , except for maintaining legacy code.
3. Declare variables at the top to avoid TDZ errors.
4. Use linters like ESLint to enforce best practices.

Conclusion

Understanding var, let, and const is crucial for writing secure JavaScript. Embracing block scope (let

Key takeaways:

• const prevents reassignment but not mutation.
• let and const are the modern standard in JavaScript.

Highcharts is a powerful JavaScript library for creating interactive charts and graphs. When combined with Angular, a robust framework for building web applications, you can create dynamic, data-driven visualizations with ease. This guide will walk you through integrating Highcharts into an Angular project, from setup to advanced configurations.

Why Highcharts with Angular?

• Rich Features: Supports line, bar, pie, scatter, and complex charts such as heatmaps.
• Interactivity: Zooming in and out, tooltips, and dynamic updates enhance user engagement.
• Customization: Theming, annotations, and responsive design.
• Angular Compatibility: The official highcharts-angular wrapper simplifies integration. Say goodbye to expensive custom solutions!

Prerequisites

• Node.js and npm tools installed.
• Angular CLI:

  npm install -g @angular/cli
  

• Basic knowledge of Angular components and modules.

Project Setup

1. Create an Angular Project

   ng new highcharts-angular-demo
   cd highcharts-angular-demo
   

2. Install Dependencies Install Highcharts and Angular wrappers:

   npm install highcharts highcharts-angular
   

Basic Integration

1. Import HighchartsModule

Add HighchartsModule to app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Create a Chart Component

Inapp.component.ts, define chart options:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    title: { text: 'Monthly Sales' },
    series: [{ type: 'line', data: [1, 2, 3, 4, 5] }]
  };
}

In app.component.html, render the chart:

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

3. Run the App

ng serve

Visit http://localhost:4200 and see your chart!

Dynamic Charts

Update charts reactively using Angular data binding.

1. Add a Button to Update Data

In app.component.html:

<button (click)="updateData()">Add Data</button>

2. Implement Data Update Logic

In app.component.ts:

export class AppComponent {
  //...existing code...
  updateData() {
    this.chartOptions = {
      ...this.chartOptions,
      series: [{ type: 'line', data: [...this.chartOptions.series[0].data, Math.random() * 10] }]
    };
  }
}

Configuration & Customization

1. Chart Types

Change type in series to 'bar', 'pie', etc.:

series: [{ type: 'bar', data: [10, 20, 30] }]

2. Styling

Customize colors, axes, and tooltips:

chartOptions: Highcharts.Options = {
  chart: { backgroundColor: '#f4f4f4' },
  xAxis: { title: { text: 'Month' } },
  yAxis: { title: { text: 'Sales' } },
  tooltip: { valueSuffix: ' units' }
};

3. Exporting

Enable exporting to PNG/PDF:

exporting: { enabled: true }

Advanced Features

1. Highcharts Modules

Import additional features like 3D charts:

npm install highcharts-3d

In app.component.ts:

import HC_3D from 'highcharts/highcharts-3d';
HC_3D(Highcharts);

2. Lazy Loading Chart

Load charts on demand using Angular's ngOnInit:

async ngOnInit() {
  const Highcharts = await import('highcharts');
  // Initialize chart here
}

3. Performance Optimization

• Use OnPush change detection.
• Debounce rapid data updates.

Common Issues & Solutions

1. Chart Not Updating: Reassign chartOptions instead of mutating it.
2. Missing Dependencies: Ensure highcharts andhighcharts-angular versions match.
3. Resize Issues: CallHighcharts.charts[0].reflow() on window resize.

Highcharts and Angular together offer a powerful toolkit for data visualization. This guide has enabled you to set up, customize, and optimize charts in an Angular app. Explore the Highcharts documentation for more advanced features such as stock charts or accessibility options.

There are various ways to combine two objects in JavaScript. Whether you want to conduct a shallow or deep merge will determine which technique you use.

1. Shallow Merge (Overwrite Properties) in Javascript

• Using Object.assign():

const obj1 = { a: 1, b: 2 };

const obj2 = { b: 3, c: 4 };

const merged = Object.assign({}, obj1, obj2);

// Result: { a: 1, b: 3, c: 4 }

• Using the Spread Operator (...):

const merged = {...obj1,...obj2 };

// Result: { a: 1, b: 3, c: 4 }

Note: Both methods are shallow merges—nested objects/arrays are all by reference (not cloned). If there are duplicate keys, subsequent properties will overwrite prior ones.

2. Deep Merge (Recursively Combine Nested Properties) in javascript

• Using Lodash:

const merged = _.merge({}, obj1, obj2);

• Custom Deep Merge Function (Simplified Example):

function deepMerge(target, source) {

for (const key in source) {

if (source[key] instanceof Object && target[key]) {

deepMerge(target[key], source[key]);

} else {

target[key] = source[key];

}

}

return target;

}

const merged = deepMerge({}, { a: { x: 1 } }, { a: { y: 2 } });

// Result: { a: { x: 1, y: 2 } }

Other Considerations about merging objects in javascript

• Shallow Merge: For simple scenarios, employ Object.assign() or the spread operator.
• Deep Merge: For greater resilience, use a tool such as Lodash (e.g. _.merge()), which is able to contend with sophisticated structures, including arrays and null values
• Overwriting Behavior: In situations involving conflict over keys, later objects always win.

 Here is a brand new essay about preventDefault() versus stopPropagation() in Angular. I'll start by comparing how they're used with preventDefault() and stopPropagation. We'll also offer a case study for each method and share some tips.

1. event.preventDefault() in Angular

• Purpose: To prevent the default action of a browser event (for example, a submission form or hyperlink).
• Use in Angular: With Angular’s event binding syntax (event)="handler($event)"

Example: Prevent link from navigating:

<a href="https://dangerous.com" (click)="onLinkClick($event)">Dangerous Link</a>

onLinkClick(event: MouseEvent) {
  event.preventDefault(); // Stop navigation
  // Custom logic here (e.g., show a modal instead)
}

• Scenarios Commonly Encountered in Angular:
  • When using (submit) and <form> to cancel form submission.
  • Shut off the default behaviors of anchor tags, buttons, or form fields.

2. event.stopPropagation() in Angular

• Purpose: Stop event bubbling/capturing in the DOM tree.
• Use in Angular: To prevent parent and descendant components from receiving the exact same events.

Example: Don't let a press on a button cause the parent <div> method to fire:

<div (click)="onParentClick()">
  <button (click)="onButtonClick($event)">Click Me</button>
</div>

onButtonClick(event: MouseEvent) {
  event.stopPropagation(); // The mom's onParentClick() will not fire
  // Take care of button click
}

• Specific Cases:
  • Stop nested components from propagating events.
  • Avoid conflict with other handlers dealing in similar space (e.g., dropdown, modals).

3. Key Differences in Angular

4. Using Both Together in Angular

Example: Handle a custom form action without submitting and prevent parent components from interpreting it:

<form (submit)="onFormSubmit($event)">
  <button type="submit">Save</button>
</form>

onFormSubmit(event: Event) {
  event.preventDefault(); // Halt the default form submission
  event.stopPropagation(); // Don't let parent events hear about this
  this.saveData(); // Custom logic here, e.g. http call
}

5. Angular Special Notes

Event Modifiers

Angular does not provide its own event modifiers like Vue's .prevent or .stop. You need to call the method explicitly instead:

<form (submit)="onSubmit($event)"></form>

onSubmit(event: Event) {
  event.preventDefault(); // Manually call
}

Component Communication

• stopPropagation() only affects DOM events, not Angular's @Output().

Example:

<app-child (customEvent)="onChildEvent()"></app-child>

// ChildComponent
@Output() customEvent = new EventEmitter();
emitEvent() {
  this.customEvent.emit();
  // Whether the parent code listens to DOM event propagation, onChildEvent() will fire
}

Change Detection

• Neither method affects Angular change detection.
• Use NgZone or ChangeDetectorRef when events bypass Angular's domain (for example, setTimeout).

6. Angular Best Practices

1. How to Break Free from Inline Calls: Place your methods right in the constituent, rather than inside the official template:

   <a href="#" (click)="onClick($event)">Link</a>
   <button (click)="onClick($event)">Link</button>
   

2. For Component Communication, Use EventEmitter : Old-fashioned emit rather than DOM event. Use @Output() Stateless Copy for State Changes: Ensure data is never changed after a call to preventDefault(), to be sure change detection fires.

7. Common Traps

• Lack of $event: Don’t forget to mention $event in the template:

  <button (click)="onClick">Click</button> ❌ Incorrect
  <button (click)="onClick($event)">Click</button> ✅ Correct
  

• Too Much stopPropagation(): For highly intricate component trees, it can only create debugging headaches.

In Angular:

• preventDefault(): Regulate browser defaults (e.g., forms, links).
• stopPropagation(): Control event flow between some connected DOM elements/components.
• Use both in tandem to finely manage your event firing and your UI experience.