Sign in
Skip to solution
mediumFrontend

What is a directive and what are the types?

837 views
01

Understand the problem

Explain directives and their categories.

directives
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A directive adds behavior to elements. Components are directives with a template. Structural directives (*ngIf, *ngFor) change DOM layout. Attribute directives (ngClass, ngStyle, custom) change appearance/behavior of an existing element.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A custom attribute directive
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  @Input() appHighlight = 'yellow';        // configurable via attribute

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onEnter() {
    this.el.nativeElement.style.background = this.appHighlight;
  }
  @HostListener('mouseleave') onLeave() {
    this.el.nativeElement.style.background = '';
  }
}

// Usage:  <p appHighlight="lightblue">Hover me</p>
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 31 of 121 decoded in the Angular track. One more won't hurt.

Back to track