https://github.com/mohdrashid/ng2-timeline
An angular js library that automatically generates timeline with callback function to handle click events
https://github.com/mohdrashid/ng2-timeline
angular angular2 angularjs events milestone ng2 ng2-timeline timeline
Last synced: 10 months ago
JSON representation
An angular js library that automatically generates timeline with callback function to handle click events
- Host: GitHub
- URL: https://github.com/mohdrashid/ng2-timeline
- Owner: mohdrashid
- Created: 2017-07-31T16:06:07.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-31T16:32:00.000Z (almost 9 years ago)
- Last Synced: 2025-08-09T12:04:22.302Z (10 months ago)
- Topics: angular, angular2, angularjs, events, milestone, ng2, ng2-timeline, timeline
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# ng2-timeline
## Installation
To install this library, run:
```bash
$ npm install ng2-timeline --save
```
## Consuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
```bash
$ npm install ng2-timeline
```
and then from your Angular `Module`:
```typescript
// Import your library
import { Ng2Timeline } from 'ng2-timeline';
@NgModule({
declarations: [
XComponent
],
imports: [
// Specify your library as an import
Ng2Timeline
],
providers: [],
})
export class XModule { }
```
Once your library is imported, you can use its components, directives and pipes in your Angular application:
```xml
{{title}}
```
In your component class create the parameter and callback function
```typescript
@Component({
templateUrl: './x.component.html',
selector:'x'
})
export class XComponent {
/**
* This function should return true for an event to be
* completed
*/
public completeListener(item){
console.log(item);
return true;
}
/**
* Each item will have title,content,complete flag and icon
* which will be displayed on the side. Icon is in html
*/
public timelineData:Array =[
{
title:"Step 1",
icon:'',
content:"Hello World",
complete:true
},
{
title:"Step 2",
icon:'',
content:"Following step to complete",
complete:false
}
];
```
## Development
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
## License
MIT © [Mohammed Rashid](mailto:mohmad.rashid@hotmail.com)