RSRobince Studio

Angular interview revision notes

Core Angular concepts for frontend interviews. Written for developers preparing for an interview who want to refresh their Angular fast. Free, no sign-up.

5 topics in these notes

  1. What is Angular? Components & modules
  2. Templates, data binding & directives
  3. Services, dependency injection & HttpClient
  4. Routing & SPA navigation
  5. RxJS & change detection (high-level)

What is Angular? Components & modules

Simple real-life example (Understand first — very important for understanding)

  • Think of an app as made of reusable building blocks (components): header, sidebar, card, form. Angular lets you define these blocks and compose them.
  • Modules group related pieces (components, pipes, services) like folders in a project.

Real-world idea: Angular is a full framework for building single-page applications (SPAs) with a strong structure: modules, components, templates, and dependency injection.

Technical definition

  • Angular (2+) is a TypeScript-based SPA framework using components as the main UI unit.
  • A component has: a TypeScript class (logic), an HTML template (view), and optional CSS (styles).
  • NgModule groups declarations (components, pipes), imports (other modules), providers (services), and bootstrap components.

Code example

@Component({
  selector: 'app-hello',
  template: `<h1>Hello {{ name }}</h1>`
})
export class HelloComponent {
  name = 'Angular';
}

Why it matters

Understanding how Angular organizes code (modules/components) is essential before you can reason about routing, services, and state.

Interview tip

Be ready to describe what a component is, what goes into @NgModule, and how Angular boots an app (AppModule → bootstrap component).

Templates, data binding & directives

Simple real-life example (Understand first — very important for understanding)

  • Data binding is like automatic text replacement: when the data changes in the component, the template updates; when the user types, the component gets updated.
  • Directives are like instructions in the template: repeat this (ngFor), show/hide (ngIf), bind attributes and events.

Real-world idea: Angular templates use bindings to connect class properties and methods to the view, and directives to control DOM structure and behavior.

Technical definition

  • Interpolation: {{ value }}; property binding: [value]="expr"; event binding: (click)="onClick()"; two-way binding: [(ngModel)]="prop".
  • Structural directives: *ngIf, *ngFor, *ngSwitch change the DOM structure.
  • Attribute directives: [ngClass], [ngStyle], custom directives to change appearance/behavior of elements.

Code example

<input [(ngModel)]="search" placeholder="Search" />
<ul>
  <li *ngFor="let item of items" (click)="select(item)">
    {{ item.name }}
  </li>
</ul>
<p *ngIf="!items.length">No items</p>

Why it matters

Most Angular interview questions include templates and bindings. You must be comfortable with *ngIf, *ngFor, and basic binding syntax.

Interview tip

Explain the four main binding types and give a quick example of each. Mention the difference between structural and attribute directives.

Services, dependency injection & HttpClient

Simple real-life example (Understand first — very important for understanding)

  • Services are like shared utilities or data sources for components: e.g. a UserService that fetches users from an API.
  • Dependency injection (DI) is how Angular gives components the services they need, instead of components creating them directly.

Real-world idea: you move logic that is not specific to a single component into services, then inject those services into components. HttpClient is the standard way to call APIs.

Technical definition

  • Service: class annotated with @Injectable or just providedIn: 'root'; used for business logic, API calls, shared state.
  • DI: Angular injector creates instances and injects them into constructors based on type (token).
  • HttpClient: Angular’s HTTP service returning Observables; supports interceptors, headers, error handling, and typing.

Code example

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}

@Component({ ... })
export class UserListComponent {
  users$ = this.userService.getUsers();
  constructor(private userService: UserService) {}
}

Why it matters

Angular is built around DI. Almost any non-trivial app uses services and HttpClient, so interviewers expect you to be fluent with them.

Interview tip

Explain why DI is useful (testability, decoupling) and show how to inject a service and use HttpClient to call a REST API.

Routing & SPA navigation

Simple real-life example (Understand first — very important for understanding)

  • Routing is like different sections in a single-page app: switching the view without reloading the entire website.
  • URLs (paths) map to components; a router outlet chooses which component to display based on the current route.

Real-world idea: Angular Router lets you define routes in a module and navigate between components using routerLink or programmatic navigation.

Technical definition

  • Routes: array of objects { path, component } passed to RouterModule.forRoot/forChild.
  • <router-outlet> placeholder in template where routed components render.
  • Support for route params (:id), guards (canActivate), lazy loading modules, and nested routes.

Code example

const routes: Routes = [
  { path: 'users', component: UserListComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '', redirectTo: 'users', pathMatch: 'full' }
];

Why it matters

Any non-trivial Angular SPA uses routing. Interviewers often ask how you set up routes, pass params, and protect routes.

Interview tip

Be ready to write a simple routes array and explain routerLink, router-outlet, and route parameters.

RxJS & change detection (high-level)

Simple real-life example (Understand first — very important for understanding)

  • Observables are like streams of values over time (e.g. user typing, HTTP responses, WebSocket messages).
  • Change detection is how Angular knows when to update the view when data changes.

Real-world idea: Angular heavily uses RxJS for async operations. Understanding basic observable patterns and the async pipe helps you build clean, reactive UIs.

Technical definition

  • Observable: lazy stream; subscribe() to listen. Common operators: map, filter, switchMap, debounceTime, catchError.
  • async pipe in templates subscribes and unsubscribes automatically and renders the latest value.
  • Change detection: by default, Angular runs after async events; OnPush strategy optimizes by checking only when inputs or observables emit.

Code example

search$ = new Subject<string>();
results$ = this.search$.pipe(
  debounceTime(300),
  switchMap(term => this.http.get(`/api/search?q=${term}`))
);

// template
<input (input)="search$.next($event.target.value)" />
<div *ngFor="let item of results$ | async">{{ item.name }}</div>

Why it matters

Many Angular codebases are RxJS-heavy. Interviews may test whether you can use observables, async pipe, and avoid memory leaks.

Interview tip

At minimum, be comfortable with Observables vs Promises, async pipe, and simple operators like map, filter, switchMap, and debounceTime.

Practise the questions

Read the top 50 Angular interview questions and answers to test yourself after revising.

More Frontend notes

HTML · CSS · JavaScript · JavaScript in the Browser · TypeScript · React · All developer notes