CngxTimelineOpposite
projects/common/timeline/timeline-item.component.ts
Import#
import { CngxTimelineOpposite } from '@cngx/common/timeline'
Description#
Marks content that belongs on the far side of the rail from the row's body - the year label opposite a card, the timestamp across a centred rail.
Per-row content, so it is a projection slot rather than a timeline-wide template: the row template already owns it, and the config cascade is for surfaces the whole timeline shares.
The extra grid track only exists for rows that actually project into it
(:has(> [cngxTimelineOpposite])), so markup that predates this slot
keeps its raster to the pixel. Placement follows the row: opposite content
sits across the rail from the body under start, end and alternate
alike.
<cngx-timeline-item status="done">
<span cngxTimelineOpposite>2019</span>
<p>Founded</p>
</cngx-timeline-item>Keep the content non-interactive. The slot projects ahead of the body,
so it is read first in every layout. For a year or a short label that is
the right reading order whichever side the rail is on. A link or a button
would take focus before the row it belongs to, and no placement of the
grid can fix that, because the paint follows [data-row-side] while the
DOM order does not.