[](https://badge.fury.io/js/angular-ng-timeline)
npm install angular2x-timeline
This is a animated vertical timeline component for Angular 2+. Angular Material is supported but not mandatory.
1) run npm install --save angular2x-timeline
2) in your app module:
``typescript
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgTimelineModule } from 'angular2x-timeline';
@NgModule({
...
imports: [
...
BrowserAnimationsModule,
NgTimelineModule
]
})
export class AppModule { }
`Usage
xml
Header
Content
`$3
xml
Header
Content
`$3
xml
Header
Content
2018
`Angular Material
The package includes a theme for angular material. In your own angular material theme:
scss
@import '~@angular/material/theming';
@import '~angular-ng-timeline/theme';
...@include angular-material-theme($your-theme);
@include ng-timeline-theme($your-theme);
`
If the theme is included, the components will be styled according to including support for primary and accent colors for the dot.Components
$3
#### Content
| tag | number |
| ---------------------- | ------ |
|
| 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' | 'right') the entries are shown on. No effect if alternate is true |
| mobileWidthThreshold | number | 640 | Decides when the mobile layout is used |$3
The expanded class will be added to the timeline-entry compnent when the entry is expanded. #### Content
| tag | number |
| ------------------------------ | ------ |
|
| 1 |
| | 1 |
| | 0...1 |
| | 0...1 |#### Outputs
| event | type | description
| --------------- | ------- | --------------------------------------------
| expand | boolean | fired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed
$3
$3
$3
#### 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 |
Polyfills
$3
When an entry is toggled, it will scroll into view. Smooth behavior is currently not supported in Chrome. A polyfill is available in iamdustan's smoothscroll$3
ClassList.toggle` was used at some points, including the second parameter. If you need to support browsers which do not support this, be sure to use a polyfill, e.g. this one.