Angular material theme supported minimalist's vertical timeline library for Angular applications.

Live demo is available at github pages.

1. run npm install --save ngx-mzd-timeline
2. import MzdTimelineModule in your app module

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

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

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

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

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

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);

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

Supports fontawesome icon as content.

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

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

No input for this component.

This library was generated with Angular CLI version 9.0.7.

Run ng generate component component-name --project ngx-mzd-timeline to generate a new component inside the library. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-mzd-timeline.

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

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.

Run ng test ngx-mzd-timeline to execute the unit tests of the library via Karma. Run ng test to execute the unit tests of the demo app via Karma.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.