kmtnflower/src/app/structured-data/structured-data.component.ts

import { Component, effect, inject, PLATFORM_ID, OnDestroy } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { StructuredDataService } from '../services/structured-data.service';

/**
 * Renders JSON-LD structured data as `<script type="application/ld+json">` tags
 * in the document <head>.
 *
 * Reads from StructuredDataService.structuredData() and keeps the head tags
 * in sync on every route change or config update.
 *
 * Tags are identified by the data attribute `data="structured-data"` so they
 * can be cleaned up on destroy without affecting other <head> scripts.
 */
@Component({
  selector: 'app-structured-data',
  standalone: true,
  template: '', // renders nothing in the body — writes to <head>
})
export class StructuredDataComponent implements OnDestroy {
  private service = inject(StructuredDataService);
  private platformId = inject(PLATFORM_ID);

  constructor() {
    // Only manipulate DOM in the browser; skip on the server.
    if (!isPlatformBrowser(this.platformId)) return;

    effect(() => {
      const entries = this.service.structuredData();
      this.renderEntries(entries);
    });
  }

  ngOnDestroy(): void {
    if (!isPlatformBrowser(this.platformId)) return;
    this.clearTags();
  }

  // ── Private ────────────────────────────────────────────────────

  /** Write JSON-LD script tags to <head>, replacing any previous ones. */
  private renderEntries(entries: unknown[]): void {
    this.clearTags();

    const head = document.head;
    for (const entry of entries) {
      const script = document.createElement('script');
      script.type = 'application/ld+json';
      script.setAttribute('data', 'structured-data');
      script.textContent = JSON.stringify(entry);
      head.appendChild(script);
    }
  }

  /** Remove all previously injected structured-data script tags. */
  private clearTags(): void {
    const tags = document.querySelectorAll('script[data="structured-data"]');
    for (const tag of tags) {
      tag.remove();
    }
  }
}