angular-mgl-timeline

angular-mgl-timeline

This is a animated vertical timeline component for Angular 2+. Angular Material is supported but not mandatory.

Online Demo

An Online Demo with live editing is available on stackblitz.

Getting started

1. run npm install --save angular-mgl-timeline
2. in your app module:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MglTimelineModule } from 'angular-mgl-timeline';

@NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule,
    MglTimelineModule
  ]
})
export class AppModule { }

Usage

Minimal Setup

<mgl-timeline>
    <mgl-timeline-entry>
        <mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
        <mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
    </mgl-timeline-entry>
</mgl-timeline>

Include a dot

<mgl-timeline>
    <mgl-timeline-entry>
        <mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
        <mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
        <mgl-timeline-entry-dot></mgl-timeline-entry-dot>
    </mgl-timeline-entry>
</mgl-timeline>

For Angular 8,9,10
<mgl-timeline-entry-dot [size]="size" style="background-color: color;"></mgl-timeline-entry-dot>

Include side data

<mgl-timeline>
    <mgl-timeline-entry>
        <mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
        <mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
        <mgl-timeline-entry-side>2018</mgl-timeline-entry-side>
    </mgl-timeline-entry>
</mgl-timeline>

Angular Material

The package includes a theme for angular material. In your own angular material theme:

@use '@angular/material' as mat;
@use 'angular-mgl-timeline' as mgl;
...

@include mat.all-component-themes($your-theme);
@include mgl.timeline-theme($your-theme);

If the theme is included, the components will be styled according to $your-theme including support for primary and accent colors for the dot.

Components

MglTimeline

Content

tag	number
<mgl-timeline-entry>	n

Inputs

property	type	default	impact
toggle	boolean	true	If set to true, expanding one entry will collapse all other entries and vice versa
alternate	boolean	true	If set to true, entries will be displayed alternately (left / right). No effect in mobile mode
focusOnOpen	boolean	false	If set to true, expanding an entry will scroll it into view
side	string	'left'	Changes side ('left'
mobileWidthThreshold	number	640	Decides when the mobile layout is used

MglTimelineEntry

The expanded class will be added to the timeline-entry compnent when the entry is expanded.

Content

tag	number
<mgl-timeline-entry-header>	1
<mgl-timeline-entry-content>	1
<mgl-timeline-entry-dot>	0...1
<mgl-timeline-entry-side>	0...1

Outputs

event	type	description
expand	boolean	fired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed

MglTimelineEntryHeader

MglTimelineEntryContent

Inputs

property	type	default	impact
expandAnimationTiming	string	'200ms ease'	Controls the animation speed of the content of an entry. Set to 0ms to disable the animation
collapseAnimationTiming	string	'100ms ease'	Controls the animation speed of the content of an entry. Set to 0ms to disable the animation

MglTimelineEntryDot

Inputs

property	type	default	impact
size	number	45	Size of the dot [px]
class	string	primary	Will be set as class name of the dot element. primary and accent can be used when using the angular material theme
expandAnimationTiming	string	'200ms ease'	Controls the animation speed of the dot of an entry. Set to 0ms to disable the animation
collapseAnimationTiming	string	'100ms ease'	Controls the animation speed of the dot of an entry. Set to 0ms to disable the animation

License

MIT License (c) Markus Glutting