Ngx-rend-timeline NPM

ngx-mzd-timeline

Angular material theme supported minimalist's vertical timeline library for Angular applications. Forked by me to keep it up to date when I need it and to be able to flexible add updates.

Getting Started

1) run npm install --save ngx-rend-timeline 2) import MzdTimelineModule in your app module

...
import { MzdTimelineModule } from 'ngx-rend-timeline';

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

Usage

Minimal Setup

<mzd-timeline>
  <mzd-timeline-content>
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Icon

mzd-icon supports fontawesome icons.

<mzd-timeline>
  <mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
  <mzd-timeline-content>
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Border

Border around the content

<mzd-timeline>
  <mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
  <mzd-timeline-content [border]="true">
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Border with material theme color

<mzd-timeline>
  <mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
  <mzd-timeline-content [border]="true" [color]="'accent'">
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Other Examples

Other examples can be found in the app.component.html file.

Angular Material Theme

The package supports angular material theme. In your own angular material theme:

@import '~@angular/material/theming';
@import "~ngx-mzd-timeline/src/mzd-timeline.theme.scss";

...

@include angular-material-theme($your-theme);
@include mzd-timeline-theme($your-theme);

Components

MzdTimeline

Content

tag	number
`<mzd-timeline-content>`	n

Inputs

property	type	default	impact
`alternateSide`	boolean	true	If set to true, entries will be displayed alternately (`'left'` / `'right'`). In XS devices, if set ture, contents will be placed at `'right'` side of the vertical line; if set false, content will be placed at `'left'`/`'right'` depending on the value of `firstContentSide`.
`firstContentSide`	string	'left'	Changes side (`'left'` / `'right'`) of the first content is shown on. If `alternateSide` is `false`, all the contents will follow the side of the first content, otherwise contents will take side alternately. No effect in XS devices if `alternateSide` is `true`.
`chat`	boolean	false	Changes the view to a more chat-like view, with a line on each side and the content coming from them. No effect in XS devices or if `alternateSide` is false.

MzdTimelineContent

Content

tag	number
`<mzd-icon>`	0/1
any html / angular component	n

mat-card can also be used. An example can be found in app.component.html file.

Inputs

property	type	default	impact
`card`	boolean	true	Creates box shadow around the content, similar to `mat-card`.
`border`	boolean	false	Creates border around the content.

MzdIcon

Content

Supports fontawesome icon as content. | tag | number | | ---------------------------- | ------ | | <fa-icon> | 0/1 |

Single English letter can also be used as icon. For example:

<mzd-icon><strong>X<strong></mzd-icon>

Inputs

No input for this component.

About

This library was generated with Angular CLI version 9.0.7.

For Devlopers Who Want To Contribute

Code scaffolding

Note: Don't forget to add --project ngx-mzd-timeline or else it will be added to the default demo app.

Build

Run ng build ngx-mzd-timeline --prod to build the library project. The build artifacts will be stored in the dist/ directory. Run ng build to build the demo app. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.