What is a directive and what are the types? | Interview Question

Q: What is a directive and what are the types?

**Target Audience:** Developers who use components daily and want a clear map of Angular's directive types, and how to write their own. **Difficulty:** Easy to Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The rendered output and event behaviour below were produced on Angular 22.2.3 by compiling the example with ngc (strict templates) and driving it in jsdom; the compiled definitions were read from ngc output and the API notes from the installed typings. ## 1. Why This Even Matters — A Story First Think of stickers you can put on things in an office. A **"Fragile" sticker** does not change what the box is; it changes how people treat it. Stick it on any box and that box gets handled carefully. A **"Make 3 copies" sticker** on a document tells the clerk to produce copies, or none at all if the sticker says zero; it changes *how many* of the thing exist. And a **pre-printed form** is a sticker so big i

The problem

Question presented to candidate: "What is a directive in Angular? Walk me through the different types, give an example of each, and tell me when you would write your own."

What a strong answer should cover:

A directive is a class with @Directive metadata that Angular attaches to elements matching its selector, to add behaviour or change appearance.
Components are directives with a template (@Component extends @Directive).
Attribute directives change the look or behaviour of their host element (NgClass, NgStyle, NgModel, a custom appHighlight), typically through host bindings and listeners.
Structural directives add or remove DOM by stamping out an ng-template via TemplateRef and ViewContainerRef (*ngIf, *ngFor, custom *appHasRole); the built-in three are now replaced by @if / @for / @switch.
Host directives (directive composition API, v15+) let a component or directive apply other directives to its own host without inheritance.
Directives are standalone by default and must be imported where used.

Clarifying questions expected:

"Do you want the conceptual categories, or how to build one?"

Code / implementation expected: Yes — a custom attribute directive, ideally also a structural one.

directives

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: Developers who use components daily and want a clear map of Angular's directive types, and how to write their own. Difficulty: Easy to Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The rendered output and event behaviour below were produced on Angular 22.2.3 by compiling the example with ngc (strict templates) and driving it in jsdom; the compiled definitions were read from ngc output and the API notes from the installed typings.

1. Why This Even Matters — A Story First

Think of stickers you can put on things in an office. A "Fragile" sticker does not change what the box is; it changes how people treat it. Stick it on any box and that box gets handled carefully. A "Make 3 copies" sticker on a document tells the clerk to produce copies, or none at all if the sticker says zero; it changes how many of the

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularAn attribute directive, a structural directive, and a component composed with hostDirectives

Open in playground

import { Component, Directive, Input, TemplateRef, ViewContainerRef, inject, signal } from "@angular/core";

// Attribute directive: changes the look or behaviour of the element it sits on.
@Directive({
  selector: "[appHighlight]",
  host: {
    "[style.background]": "active ? color : null",
    "(mouseenter)": "active = true",
    "(mouseleave)": "active = false",
  },
})
export class Highlight {
  @Input("appHighlight") color = "gold";
  active = false;
}

// A tiny reusable behaviour, composed into a component with hostDirectives.
@Directive({ selector: "[appTooltip]", host: { "[attr.title]": "tip" } })
export class Tooltip {
  @Input() tip = "";
}

// Structural directive: adds or removes DOM by stamping out its <ng-template>.
@Directive({ selector: "[appRepeat]" })
export class Repeat {
  private tpl = inject(TemplateRef<{ $implicit: number }>);
  private vcr = inject(ViewContainerRef);
  @Input() set appRepeat(times: number) {
    this.vcr.clear();
    for (let i = 0; i < times; i++) this.vcr.createEmbeddedView(this.tpl, { $implicit: i + 1 });
  }
}

// Component: a directive with its own template.
@Component({
  selector: "app-badge",
  hostDirectives: [{ directive: Tooltip, inputs: ["tip"] }],
  template: `<span class="badge"><ng-content /></span>`,
})
export class Badge {}

@Component({
  selector: "app-root",
  imports: [Highlight, Repeat, Badge],
  template: `
    <p appHighlight="lightblue">Hover me</p>
    <ul><li *appRepeat="count(); let n">Row {{ n }}</li></ul>
    <app-badge tip="Composed with hostDirectives">new</app-badge>
    <button (click)="count.set(count() + 1)">more rows</button>
  `,
})
export class AppComponent {
  count = signal(2);
}

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.