Preview Header

<preview-header> is a collapsible container for document-preview details: a title, a toggle chevron, and a two-column table (key | value) whose rows are entirely projected by the caller. It owns only the shell — which metadata fields to show, and what renders them, is entirely up to the consuming app.

Minimal example

import { Component, input } from "@angular/core";
import { PreviewHeaderComponent } from "@sinequa/atomic-angular";
import type { Article } from "@sinequa/atomic";

@Component({
  selector: "my-preview",
  imports: [PreviewHeaderComponent],
  template: `
    <preview-header [title]="article().title">
      <tr>
        <th>Type</th>
        <td>{{ article().docformat }}</td>
      </tr>
      @if (article().authors?.length) {
        <tr>
          <th>Author</th>
          <td>{{ article().authors?.join(", ") }}</td>
        </tr>
      }
    </preview-header>
  `,
})
export class MyPreviewComponent {
  readonly article = input.required<Article>();
}

Two different host apps can project entirely different rows into the same <preview-header> — fewer fields, or app-specific ones — without forking the component. A conditional row is written with a plain @if around the <tr>, same as any other content projection.

Options

This component has no outputs — it manages its own open/collapsed state internally (open by default).

Pitfalls

What's next