구조 directive는 내부적으로 어떻게 동작하나요?

<!-- 당신이 작성하는 것 -->
<p *ngIf="isVisible">Hello</p>

<!-- Angular가 실제로 하는 것 -->
<ng-template [ngIf]="isVisible">
  <p>Hello</p>
</ng-template>

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

@Directive({ selector: "[appUnless]" }) // *appUnless = "ngIf의 반대"
export class UnlessDirective {
  constructor(
    private templateRef: TemplateRef<any>,      // 감싸진 <ng-template>
    private viewContainer: ViewContainerRef,    // 렌더링할 위치
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef); // 렌더링
    } else {
      this.viewContainer.clear();                               // 제거
    }
  }
}
// 사용: <p *appUnless="isHidden">isHidden이 false일 때 표시됨</p>

<!-- 최신 Angular는 *ngIf/*ngFor를 내장 블록 구문으로 대체한다 -->
@if (isVisible) { <p>Hello</p> } @else { <p>Hidden</p> }
@for (item of items; track item.id) { <li>{{ item.name }}</li> }