What are custom structural directives? How do you implement one?

🧱 What Are Structural Directives?

Structural directives are used to change the structure of the DOM — by adding, removing, or manipulating elements in the template.

Examples of built-in structural directives:

• *ngIf

• *ngFor

• *ngSwitch

They use the * prefix and typically manipulate the host element and its view in the DOM.

🧰 What Are Custom Structural Directives?

A custom structural directive lets you create your own logic to control how and when certain parts of the DOM appear.

For example, a custom directive called *appUnless could behave as the opposite of *ngIf.

✅ How to Implement One — Step-by-Step

🧪 Example: *appUnless Directive

1. Create the Directive

ng generate directive unless

2. Code Implementation

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef); // Show it
    } else {
      this.viewContainer.clear(); // Remove it
    }
  }
}

💡 How It Works:

• TemplateRef: Represents the element the directive is applied to.

• ViewContainerRef: Container that holds views — allows us to insert or remove them.

• @Input(): Binds the directive’s value (like *appUnless="isLoggedIn").

🧪 Usage in Template

<div *appUnless="isLoggedIn">
  Please log in to view this content.
</div>

If isLoggedIn is false, the content appears — the reverse of *ngIf.

🧠 Summary

Aspect	Structural Directive
Modifies DOM?	✅ Yes — adds/removes elements dynamically
Prefix	Typically used with *
Uses	TemplateRef, ViewContainerRef, @Input
Example	*ngIf, *ngFor, *appUnless