NgxMatTimeline

Timeline component for Angular Material


StackBlitz Demo

!Screenshot

Features

* Vertical and Horizontal orientation
* Left, Center and Right position
* Reversed direction
* Support for Google Material Icons (including SVG) and images
* Custom icon and label directives

Installation

``shell
npm -i ngx-mat-timeline
`

Example

Fro more details see projects/demo application

`typescript
import { NgxMatTimelineModule } from "ngx-mat-timeline";
...

@NgModule({
imports: [
...,
NgxMatTimelineModule,
],
...
})
class AppModule { ... }

`

Basic template
`html
position="center"
orientation="horizontal">

*ngFor="let item of timelineItems"
[icon]="item.icon"
[label]="item.label">

{{ item.content }}




`

Custom template
`html
position="center"
orientation="horizontal">

*ngFor="let item of timelineItems; let idx = index;">




{{ item.label }}

{{ item.content }}


``

Components

* ngx-mat-timeline

| @Input | Type | Available values | Default |
| ----- | ---- | ---------------- | ------- |
| orientation | string | vertical, horizontal | vertical |
| position | string | start, center, center-alt, end | start |
| reverse | boolean | | false |

* ngx-mat-timeline-item

| @Input | Type | Available values | Default |
| ----- | ---- | ---------------- | ------- |
| icon | string | Standard MatIcon value | |
| svgIcon | string | Standard MatIcon value (svgIcon) | |
| iconUrl | string | Image url | |
| label | string | Text | |

Note: If multiple icons are defined, only first one is displayed (icon or svgIcon or iconUrl).

Directives

Use with ng-template.

* ngxMatTimelineItemIcon

* ngxMatTimelineItemLabel