Essential Notes & Tips – Angular Interview Handbook

Written by Amadou Ada DIENE

A passionate software craftsman and dedicated to demystifying complex technologies. Focusing on clean code and pragmatic solutions, he shares insights across full-stack development to empower engineers in building amazing and resilient applications.



Front-End



0 comment(s)



2025-05-07

Preparing for an interview covering Angular requires understanding the framework’s evolution, key features, and best practices. Below are detailed notes for each version, highlighting major changes, features, and examples. These notes are tailored for a senior developer role, focusing on core concepts, tools, and practical insights for theoretical and hands-on discussions. The content is concise yet comprehensive, covering critical aspects of each version.

General Tips

Core Concepts:
- Master components, services, directives, pipes, modules, standalone APIs.
- Understand DI, change detection, RxJS.
Practical Examples:
- Code a component, service, or lazy-loaded route.
- Demonstrate state management (signals, NgRx).
Performance Optimization:
- Discuss lazy loading, AOT, tree-shaking, zoneless change detection.
Migration Strategies:
- Explain AngularJS to Angular (ngUpgrade) or between Angular versions.
- Highlight ng update and migration guides.

Testing:

Use Jasmine, Karma, Protractor for unit/E2E tests.

describe('MyComponent', () => {
  it('should render title', () => {
    const fixture = TestBed.createComponent(MyComponent);
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('h1').textContent).toContain('Hello');
  });
});

Version Evolution:
- Compare versions (AngularJS vs. Angular 2, Ivy vs. View Engine, signals vs. RxJS).
Soft Skills:
- Discuss mentoring or architecting large-scale apps.

AngularJS (1.x)

Overview

Release: October 20, 2010
End-of-Life: December 31, 2021
Language: JavaScript (ECMAScript 5)
Architecture: Model-View-Controller (MVC)
Purpose: Built for dynamic single-page applications (SPAs) by extending HTML with directives and two-way data binding.

Key Features

Two-Way Data Binding:

Synchronizes model and view via $scope.

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name">
  <p>Hello, {{name}}!</p>
</div>
<script>
  angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
      $scope.name = 'AngularJS';
    });
</script>

Directives:

Extend HTML with custom behavior (e.g., ng-model, ng-repeat).

angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<p>Custom Directive!</p>'
  };
});

Dependency Injection (DI):

Manages dependencies via injectable services.

angular.module('myApp').service('myService', function() {
  this.sayHello = () => 'Hello from Service!';
});
angular.module('myApp').controller('myCtrl', function($scope, myService) {
  $scope.message = myService.sayHello();
});

Digest Cycle:
- Tracks $scope changes to update the view; can be performance-intensive.
Filters:
- Format data (e.g., currency, uppercase).
```
<p>{{price | currency}}</p>
```

Routing:

Uses ngRoute for URL-based routing.

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', { template: '<h1>Home</h1>' })
      .otherwise({ redirectTo: '/home' });
  });

Challenges

Performance: Digest cycle struggles with large datasets.
Mobile Support: Limited out-of-the-box support.
Complexity: Scope hierarchy and manual DOM manipulation can lead to maintenance issues.

Interview Tips

Explain MVC and two-way data binding.
Discuss optimization (e.g., reducing watchers, using {{::value}} for one-time binding).
Highlight limitations that led to the Angular rewrite.

Angular 2

Overview

Release: September 14, 2016
End-of-Life: March 14, 2018
Language: TypeScript 2.0
Architecture: Component-based
Purpose: Complete rewrite to improve performance, modularity, and mobile support.

Key Features

Component-Based Architecture:

Replaces controllers/scopes with reusable components.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>'
})
export class AppComponent {
  title = 'Angular 2';
}

TypeScript:

Strongly typed, enhances tooling and error detection.

interface User {
  name: string;
  age: number;
}
class UserComponent {
  user: User = { name: 'John', age: 30 };
}

Hierarchical Dependency Injection:
- Granular control at component/module level.
Improved Performance:
- Unidirectional data flow and change detection.

Angular CLI:

Scaffolding, building, and testing.

ng new my-app
ng generate component my-component

Routing:

Uses @angular/router.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [{ path: 'home', component: HomeComponent }];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Challenges

Steep learning curve due to TypeScript.
No direct upgrade path from AngularJS.

Interview Tips

Compare AngularJS vs. Angular 2 (MVC vs. components, JavaScript vs. TypeScript).
Explain rewrite reasons (performance, mobile).
Be ready to write a component or discuss DI.

Angular 4

Overview

Release: March 23, 2017
End-of-Life: September 23, 2018
Language: TypeScript 2.1/2.2
Purpose: Incremental improvements, backward compatible with Angular 2.

Key Features

Smaller & Faster:
- Reduced bundle sizes, faster compilation.

Animation Package:

Moved to @angular/animations.

import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  animations: [
    trigger('fade', [
      state('void', style({ opacity: 0 })),
      transition(':enter', [animate('500ms', style({ opacity: 1 }))])
    ])
  ]
})
export class MyComponent {}

**Improved ngIf and ngFor:

Added else clause.

<div *ngIf="condition; else elseBlock">Condition True</div>
<ng-template #elseBlock>Condition False</ng-template>

TypeScript 2.1/2.2:
- Enhanced type checking, async/await.

Interview Tips

Explain why Angular 3 was skipped (router version alignment).
Discuss performance and animation use cases.
Be ready to explain ngIf enhancements.

Angular 5

Overview

Release: November 1, 2017
End-of-Life: May 1, 2019
Language: TypeScript 2.4
Purpose: Progressive web apps (PWAs) and build optimization.

Key Features

HttpClient:

Replaced Http for better API handling.

import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

Build Optimizer:
- Removes unnecessary code.
Angular Universal:
- Improved server-side rendering (SSR).
Internationalization (i18n):
- Enhanced multi-language support.

Interview Tips

Explain HttpClient benefits (typed responses, interceptors).
Discuss SSR and PWA use cases.
Be ready to write an HTTP service.

Angular 6

Overview

Release: May 4, 2018
End-of-Life: November 4, 2019
Language: TypeScript 2.7
Purpose: Tooling and library updates.

Key Features

Angular CLI Enhancements:
- Added ng add and ng update.
```
ng add @angular/material
```

RxJS 6:

New operators with pipe.

import { map } from 'rxjs/operators';
this.http.get('api/data').pipe(map(data => data.name)).subscribe();

Tree-Shakable Providers:

Services can be tree-shaken.

@Injectable({ providedIn: 'root' })
export class MyService {}

Angular Elements:
- Custom elements for non-Angular apps.

Interview Tips

Discuss ng update for migrations.
Explain RxJS 6 changes (pipe vs. chained operators).
Be ready to demonstrate a providedIn: 'root' service.

Angular 7

Overview

Release: October 18, 2018
End-of-Life: April 18, 2020
Language: TypeScript 3.1
Purpose: Performance and developer experience.

Key Features

Virtual Scrolling:

Efficient large list rendering.

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

Drag and Drop:

Via @angular/cdk.

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

CLI Prompts:
- Interactive CLI.
Bundle Budgets:
- Warns if bundle size exceeds limits.

Interview Tips

Highlight virtual scrolling for performance.
Discuss drag-and-drop use cases.
Explain bundle budgets for production.

Angular 8

Overview

Release: May 28, 2019
End-of-Life: November 28, 2020
Language: TypeScript 3.4
Purpose: Ivy renderer preview, differential loading.

Key Features

Ivy Renderer (Preview):
- Smaller bundles, faster compilation.
Differential Loading:
- Modern ES2015 for new browsers, legacy for older ones.

Lazy Loading with Dynamic Imports:

Simplified syntax.

const routes: Routes = [
  { path: 'lazy', loadComponent: () => import('./lazy.component').then(m => m.LazyComponent) }
];

Web Workers:
- Improved task offloading.

Interview Tips

Explain Ivy’s impact on bundle size/performance.
Discuss differential loading for compatibility.
Be ready to write a lazy-loaded route.

Angular 9

Overview

Release: February 6, 2020
End-of-Life: August 6, 2021
Language: TypeScript 3.6/3.7
Purpose: Ivy default, improved build times.

Key Features

Ivy Default:
- Up to 40% smaller bundles.
Improved Type Checking:
- Stricter TypeScript checks.
AOT Compilation:
- Default for faster builds/runtime.
Angular Language Service:
- Enhanced IDE template support.

Interview Tips

Discuss Ivy benefits (tree-shaking, debugging).
Explain AOT vs. JIT compilation.
Be ready to troubleshoot Ivy migrations.

Angular 10

Overview

Release: June 24, 2020
End-of-Life: December 24, 2021
Language: TypeScript 3.9/4.0
Purpose: Bug fixes, performance tweaks.

Key Features

TypeScript 3.9/4.0:
- Better type inference.
New Date Range Picker:
- Added to Angular Material.
Warnings for CommonJS:
- Encourages ES modules.
Optional Stricter Settings:
- Stricter template/type checking.

Interview Tips

Highlight TypeScript advancements.
Discuss stricter settings for teams.
Explain CommonJS vs. ES modules.

Angular 11

Overview

Release: November 11, 2020
End-of-Life: May 11, 2022
Language: TypeScript 4.0
Purpose: Developer experience, performance.

Key Features

Hot Module Replacement (HMR):
- Faster development with preserved state.
```
ng serve --hmr
```
Improved Build Performance:
- Faster ng build.
TypeScript 4.0:
- Labeled tuple elements.
Component Test Harnesses:
- Simplified unit testing.

Interview Tips

Explain HMR benefits.
Discuss test harnesses for testing.
Be ready to optimize build pipelines.

Angular 12

Overview

Release: May 12, 2021
End-of-Life: November 12, 2022
Language: TypeScript 4.2
Purpose: Transition to modern standards.

Key Features

Deprecation of View Engine:
- Ivy fully adopted.
Nullish Coalescing:
- Supported in templates.
```
{{data ?? 'No Data'}}
```
Tailwind CSS Support:
- Easier CLI integration.
TypeScript 4.2:
- Improved type safety.

Interview Tips

Discuss View Engine deprecation/migrations.
Explain nullish coalescing.
Be ready to integrate Tailwind.

Angular 13

Overview

Release: November 3, 2021
End-of-Life: May 3, 2023
Language: TypeScript 4.4
Purpose: Simplified APIs, modern tooling.

Key Features

View Engine Removed:
- Ivy only.

Dynamic Component Creation:

Simplified with ViewContainerRef.

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
createComponent() {
  this.container.createComponent(MyComponent);
}

TypeScript 4.4:
- Control flow analysis improvements.
100ms Faster Builds:
- Optimized Ivy compilation.

Interview Tips

Explain dynamic components.
Discuss build performance.
Be ready to migrate View Engine apps.

Angular 14

Overview

Release: June 2, 2022
End-of-Life: December 2, 2023
Language: TypeScript 4.7
Purpose: Standalone components, typed forms.

Key Features

Standalone Components (Preview):

No NgModules required.

import { Component } from '@angular/core';
@Component({
  selector: 'app-standalone',
  standalone: true,
  template: '<p>Standalone Component</p>'
})
export class StandaloneComponent {}

Typed Reactive Forms:

Strict typing.

form = new FormGroup({
  name: new FormControl<string>('')
});

NgOptimizedImage:
- Optimized image loading.
TypeScript 4.7:
- Optional chaining, nullish coalescing.

Interview Tips

Discuss standalone components for simplicity.
Explain typed forms for safety.
Be ready to optimize images with NgOptimizedImage.

Angular 15

Overview

Release: November 16, 2022
End-of-Life: May 16, 2024
Language: TypeScript 4.8
Purpose: Stability, developer experience.

Key Features

Standalone APIs Stable:
- Supported for components, directives, pipes.
Router Improvements:
- Tree-shakable standalone router.
Automatic Imports:
- CLI auto-imports dependencies.
MDC-Based Angular Material:
- Modernized components.

Interview Tips

Highlight standalone APIs for module-free apps.
Discuss router optimizations.
Be ready to refactor NgModule apps.

Angular 16

Overview

Release: May 3, 2023
End-of-Life: November 3, 2024
Language: TypeScript 5.0
Purpose: Signals, hydration.

Key Features

Signals (Preview):

Reactive state management.

import { signal } from '@angular/core';
count = signal(0);
increment() {
  this.count.update(value => value + 1);
}

Non-Destructive Hydration:
- Improved SSR performance.

Required Inputs:

Enforce required inputs.

@Input({ required: true }) name: string;

TypeScript 5.0:
- Decorators, const generics.

Interview Tips

Explain signals vs. RxJS.
Discuss hydration for SEO/performance.
Be ready to write a signal-based component.

Angular 17

Overview

Release: November 8, 2023
End-of-Life: May 8, 2025
Language: TypeScript 5.2
Purpose: Productivity, performance.

Key Features

New Control Flow Syntax:

@if, @for, @switch.

@if (condition) {
  <p>Condition True</p>
} @else {
  <p>Condition False</p>
}

Deferred Loading:
- @defer for lazy loading.
```
@defer {
  <app-heavy-component />
}
```
Improved SSR:
- Enhanced Angular Universal.
Vite + esbuild:
- Faster builds.

Interview Tips

Discuss new control flow vs. *ngIf/*ngFor.
Explain @defer for performance.
Be ready to optimize SSR.

Angular 18

Overview

Release: May 22, 2024
End-of-Life: November 22, 2025
Language: TypeScript 5.4
Purpose: Performance, modern features.

Key Features

Zoneless Change Detection (Experimental):
- Eliminates Zone.js.
Signals Stable:
- Fully integrated.
Improved Hydration:
- Incremental hydration for SSR.
TypeScript 5.4:
- Enhanced type narrowing.

Interview Tips

Explain zoneless change detection benefits/challenges.
Discuss signals in production.
Be ready to implement incremental hydration.

Angular 19

Overview

Release: November 6, 2024
End-of-Life: May 6, 2026
Language: TypeScript 5.6
Purpose: Simplified development, performance.

Key Features

Standalone by Default:

Components, directives, pipes reduce NgModule reliance.

@Component({
  standalone: true,
  selector: 'app-root',
  template: '<app-child />',
  imports: [ChildComponent]
})
export class AppComponent {}

Incremental Hydration (Preview):
- Fine-grained SSR control.
Route-Level Render Mode:
- Custom rendering per route.
Linked Signals:
- Enhanced state management.
Hot Module Replacement (HMR):
- Improved development speed.
Zoneless Change Detection (In Development):
- Zone.js-free apps.

Interview Tips

Discuss standalone architecture.
Explain incremental hydration, route-level rendering.
Be ready to migrate with ng update.

Sample Questions

How does Angular’s component-based architecture differ from AngularJS’s MVC?
- Answer: Angular uses reusable components with encapsulated logic; AngularJS relies on controllers/scopes. Components improve modularity/testability.
How would you optimize an Angular app for performance?
- Answer: Use lazy loading, AOT, tree-shaking, zoneless change detection, NgOptimizedImage.
Explain signals in Angular 16+ and their benefits.
- Answer: Signals offer fine-grained reactivity, reducing unnecessary change detection vs. RxJS. Example: Counter with signal.
How do you migrate an AngularJS app to Angular 19?
- Answer: Use ngUpgrade for hybrid apps, rewrite components incrementally, leverage ng update.