What are components and modules in Angular? | Interview Question

Q: What are components and modules in Angular?

**Target Audience:** Anyone preparing for an Angular interview — assumes basic TypeScript classes, no Angular required. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. Every output and error message quoted below was produced by compiling the code with ngc (strict templates) on Angular 22.2.3 and running it. ## 1. Why This Even Matters — A Story First Think of a restaurant kitchen. Each **station** (grill, pastry, salad) owns one part of the meal: it has its own recipe, its own equipment, and a name the head chef calls out. That station is a **component**. For years, Angular kitchens were also organised into **departments**. A department kept the official list of which stations belonged to it and which tools they were allowed to share. Want the pastry station to use the blowtorch? Check the department list. That department is an **NgModule**. Modern Angular

The problem

Question presented to candidate: "Walk me through what a component is in Angular, what an NgModule is, and whether a new Angular app still needs modules."

What a strong answer should cover:

A component is a TypeScript class with @Component metadata: a selector, a template, optional styles, and the dependencies its template uses.
An app is a tree of components; the root one is bootstrapped and the rest appear through their selectors.
An NgModule (@NgModule) groups declarations and defines a compilation context: declarations, imports, exports, providers, bootstrap.
Since v19, components, directives and pipes are standalone by default and list their own imports; NgModules are optional, not deprecated.
Standalone and NgModule code interoperate: a standalone component can import an NgModule, and a module can import standalone components.
Typical mistakes: declaring a standalone component, declaring a component in two modules, forgetting exports.

Clarifying questions expected:

"Is this a new app, or an existing one built on NgModules?"
"Do you want the template-compilation view, or how modules affect providers and lazy loading?"

Code / implementation expected: Yes — a standalone component tree, plus one NgModule-based component used from it.

components
modules

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for an Angular interview — assumes basic TypeScript classes, no Angular required. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. Every output and error message quoted below was produced by compiling the code with ngc (strict templates) on Angular 22.2.3 and running it.

1. Why This Even Matters — A Story First

Think of a restaurant kitchen. Each station (grill, pastry, salad) owns one part of the meal: it has its own recipe, its own equipment, and a name the head chef calls out. That station is a component.

For years, Angular kitchens were also organised into departments. A department kept the official list of which stations belonged to it and which tools they were allowed to share. Want the pastry station to use the blowtorch? Check

The solution is hidden so you can try first

7 min read · 10 sections

Read the code

AngularStandalone components, a standalone pipe, and an NgModule used side by side

import { Component, NgModule, Pipe, PipeTransform, input } from "@angular/core";

// ── The NgModule way (still supported) ─────────────────────────────────────
// standalone: false means "I belong to a module". The module declares it and
// exports it so other code can use it.
@Component({
  selector: "legacy-badge",
  standalone: false,
  template: `<span class="badge">[{{ label }}]</span>`,
})
export class LegacyBadgeComponent {
  label = "from a module";
}

@NgModule({
  declarations: [LegacyBadgeComponent],
  exports: [LegacyBadgeComponent],
})
export class BadgeModule {}

// ── The standalone way (the default since Angular 19) ──────────────────────
@Pipe({ name: "initials" })
export class InitialsPipe implements PipeTransform {
  transform(name: string): string {
    return name.split(" ").map((w) => w[0]).join("").toUpperCase();
  }
}

@Component({
  selector: "user-card",
  imports: [InitialsPipe], // a standalone component lists what its template uses
  template: `<div class="card">{{ name() | initials }} - {{ name() }}</div>`,
})
export class UserCardComponent {
  name = input.required<string>();
}

// The root component imports a standalone component AND a whole NgModule.
@Component({
  selector: "app-root",
  imports: [UserCardComponent, BadgeModule],
  template: `
    <user-card name="Ada Lovelace" />
    <user-card name="Grace Hopper" />
    <legacy-badge />
  `,
})
export class AppComponent {}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.