Timeline

Usage

Provide items with stable ids, a title and optional time, description, tone and SVG path icon. align positions the axis left, right or alternating; reverse changes visual order without mutating the input. density changes spacing. Use the item Template to replace the whole content area or the marker Template to replace only the dot content.

Examples

Try the behavior and open Code for the implementation.

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

<neu-timeline
  [items]="items()"
  align="left"
  density="normal"
  [reverse]="false"
  ariaLabel="Order history"
/>

import { signal } from '@angular/core';

export const items = signal([
  {
    "id": "created",
    "title": "Order received",
    "time": "09:00",
    "description": "We have received your order.",
    "tone": "info",
    "icon": undefined
  },
  {
    "id": "packed",
    "title": "Ready for delivery",
    "time": "10:30",
    "description": "Your order has been packed.",
    "tone": "warning"
  },
  {
    "id": "delivered",
    "title": "Delivered",
    "time": "12:00",
    "description": "The delivery has been completed.",
    "tone": "success",
    "icon": undefined
  }
]);

Data and content

Timeline has no Outputs and does not edit or sort your collection. reverse only changes the rendered order. Template index is the zero-based visual position after reverse. icon is SVG path data, not an icon-provider key.

Accessibility and keyboard

Timeline renders an ordered list with an optional ariaLabel. Put meaningful event text in the content; markers must not be the only way to identify a status. Decorative SVG markers are hidden from assistive technology. Interactive content inside a Template uses its own native keyboard behavior.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

import { NeuTimelineItemDirective } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export declare class NeuTimelineItemDirective {
}

import type { NeuTimelineItemContext } from '@neural-ui/core/timeline';

import { NeuTimelineItemDirective } from '@neural-ui/core/timeline';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuTimelineItemContext>;

import { NeuTimelineMarkerDirective } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export declare class NeuTimelineMarkerDirective {
}

import type { NeuTimelineMarkerContext } from '@neural-ui/core/timeline';

import { NeuTimelineMarkerDirective } from '@neural-ui/core/timeline';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuTimelineMarkerContext>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDensity } from '@neural-ui/core';

// Public declaration (reference only)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

import type { NeuTimelineAlign } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export type NeuTimelineAlign = 'left' | 'right' | 'alternate';

import type { NeuTimelineItemTone } from '@neural-ui/core/timeline';

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export interface NeuTimelineItem {
  description?: string;
  icon?: string;
  id?: string | number;
  time?: string;
  title: string;
  tone?: NeuTimelineItemTone;
}

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

import type { NeuTimelineItemContext } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export interface NeuTimelineItemContext {
  readonly $implicit: NeuTimelineItem;
  readonly index: number;
}

import type { NeuTimelineItemTone } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export type NeuTimelineItemTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';

import type { NeuTimelineItem } from '@neural-ui/core/timeline';

import type { NeuTimelineMarkerContext } from '@neural-ui/core/timeline';

// Public declaration (reference only)
export interface NeuTimelineMarkerContext {
  readonly $implicit: NeuTimelineItem;
}

Styles and tokens

Use public tokens for spacing, surface, text and focus. Check projected content and controls in both themes and at narrow widths.

Related components

Combine these components to build the surrounding interface.

• Table
• Tabs