What are Angular directives and how do structural and attribute directives differ?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Recognize the three directive kinds

   Components (directives with a template), structural directives (change DOM layout), and attribute directives (change an element's look or behavior).

2. Step 2

   Spot structural directives by the asterisk

   The * in *ngIf and *ngFor is sugar for an <ng-template> that Angular adds or removes from the DOM.

3. Step 3

   Apply attribute directives in brackets

   Use [ngClass], [ngStyle], or a custom [appHighlight] to modify an element that already exists.

4. Step 4

   Build a custom attribute directive

   Create a class with @Directive, inject ElementRef and Renderer2, and use @HostListener or @HostBinding to alter the host element.

5. Step 5

   Choose based on intent

   If you need to add or remove elements, reach for a structural directive; if you only need to restyle or add behavior, use an attribute directive.

Code Example

<!-- Structural: adds/removes DOM -->
<p *ngIf="isLoggedIn">Welcome back!</p>
<li *ngFor="let item of items">{{ item }}</li>

<!-- Attribute: modifies existing element -->
<span appHighlight [ngClass]="{ active: isActive }">Text</span>

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef, private r: Renderer2) {}

  @HostListener('mouseenter') onEnter() {
    this.r.setStyle(this.el.nativeElement, 'background', 'yellow');
  }
}

Follow-up Questions

• Why can you only apply one structural directive per element?
• How does the asterisk in *ngIf expand to <ng-template>?
• How do @HostBinding and @HostListener work in a custom directive?
• What is the difference between ngClass and the class binding [class.x]?
• How is a component related to a directive?