ngx-timeline-albe v1.6.0

• 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 | 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

TimelineItem Type

ItemBody Type

TagAttribute Type

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

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

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