• Content HTML highly manipulable.
• Styles for the template are easily customizable.
• Simplifies the aspects of internationalization, displaying dates and alternatives texts in a local format.

Version history: | Library | Angular | | ------- | ------- | | Lastet | 18.0.1 | | 1.6.0 | 17.3.0 | | 1.5.0 | 16.0.0 | | 1.4.1 | 15.2.6 | | 1.3.0 | 14.2.0 | | 1.2.11 | 11.2.4 | | 1.2.0 | 10.1.2 | | 1.1.0 | 8.0.0 |

Use license

The component is open source and released for free commercial use at no cost. Donations are welcome.

Installation

$ npm install ngx-timeline-albe

How to use

Import the module

import { NgxTimelineAlbeModule } from 'ngx-timeline-albe';

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

Template

<ngx-timeline [itens]="data"></ngx-timeline>

• Instance with options:

<ngx-timeline [itens]="data" 
    [formatDate]="'dd MMMM'" 
    [sortDesc]="true"
    [showMenu]="true" 
    [showGroup]="true" 
    [theme]="'basic'">
</ngx-timeline>

Component

import { TimelineItem } from 'ngx-timeline-albe';

  //The Json object is also accepted in string format.
  data: Array<TimelineItem> | String;

ngOnInit() {

    //Object type
    this.data = [
      {
        datetime: new Date('2020-03-29 23:59:59'),
        header: 'Sample of header',
        body: [
          {
            tag: 'h1',
            content: "Lorem ipsum"
          },
          {
            tag: 'p',
            content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa.'
          }],
        footer: 'Sample of footer. See <a href=\"https://github.com/Albejr/ngx-timeline\" target=\"_blank\">more details</a>'
      }
    ];

    //OR Json format
    this.data = `[{
      "datetime": "2020-03-29 23:59:59",
      "header": "Sample of header",
      "body": [{
          "tag": "h1",
          "content": "Lorem ipsum"
        },
        {
          "tag": "p",
          "content": "Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa."
        }
      ],
      "footer": "Sample of footer. See <a href='https://github.com/Albejr/jquery-albe-timeline' target='_blank'>more details</a>"
    }]`;
  }

Options

| Name | | Type | Default | Description | | -------------- | -------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------- | | [itens] | required | Array<TimelineItem> or String Json | [ ] | List of itens to be displayed. | | [showGroup] | optional | Boolean | true | Sets the visibility of the annual grouper. | | [showMenu] | optional | Boolean | true | Sets the anchor menu visibility for annual groupings (depends on 'showGroup'). | | [sortDesc] | optional | Boolean | true | Defines ordering of items, true: Descendente, false: Ascendente. | | [formatDate] | optional | String | 'dd MMMM' | Sets the date display format: 'dd MMMM''dd/MM/yyyy HH:mm:ss''MM/dd/yyyy''yyyy/MM/dd' | | [language] | optional | String | 'pt-BR' | Specifies manually the display language of texts (i18n), if the token LocaleID is not configured. | | [theme] | optional | String | 'basic' | Defines the style: 'basic''horizontal''minimalist''mobile''vertical' |

TimelineItem Type

| Name | | Type | Description | | -------- | -------- | ----------------- | -------------------------- | | datetime | required | Date | | | icon | optional | string | | | header | optional | string | | | body | required | Array<ItemBody> | | | footer | optional | string | |

ItemBody Type

| Name | | Type | Description | | ------- | -------- | -------------- | -------------------------- | | tag | required | string | | | content | required | string | | | attr | optional | TagAttribute | |

TagAttribute Type

| Name | | Type | Description | | -------- | -------- | ------ | -------------------------- | | href | optional | string | | | target | optional | string | | | title | optional | string | | | src | optional | string | | | width | optional | string | | | cssclass | optional | string | |

Html Structure

We'll have a similar result:

<ngx-timeline>
    <div id="timeline-albe" class="clasic">
        <section>
            <header class="group">2020</header>
            <div class="item">
                <div class="badge">
                    <span>29/03</span>
                </div>
                <article>
                    <header>Sample of header</header>
                    <div class="body">
                        <span>2017-03-29 23:59:59</span>
                        <h1>Lorem ipsum</h1>
                        <p>Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa.</p>
                    </div>
                    <footer>Sample of footer.</footer>
                </article>
                <div class="badge last">
                </div>
            </div>
        </section>
    </div>
<ngx-timeline>

Styling guide

There are several classes that help you to create your custom styles app.component.css

:host ::ng-deep #timeline-albe.minimalist {
  color: inherit;
  font-size: inherit;
  width: inherit;
  margin: 10px;
}

Notes

• The datetime element must meet the ISO 8601 standard in year-month-day format "yyyy-MM-dd" or "yyyy-MM-dd HH:mm:ss"

Demo App

Follow these instructions to run the demo:

1. Clone the repository to your local machine
2. From the project folder, run npm i to install all required dependencies
3. Run ng b ngx-timeline-albe to build in dist folder.
4. Run ng s to serve the project from a live-updating server.
5. Go to localhost:4200 to see the demo site

To do

• [x] If 'json' (string) is passed, convert to 'object'.
• [x] Displays default message.
• [ ] Insert animation.
• [x] Sort items by date.
• [x] Multiple languages.
• [x] Multiple styles.
• [ ] Document CSS customization.
• [x] Document 'json' or 'object'.

Inspired on the plug-in: https://github.com/Albejr/jquery-albe-timeline