{"id":30154045,"url":"https://github.com/callyafiune/ngx-vertical-timeline","last_synced_at":"2025-08-11T12:06:41.384Z","repository":{"id":143897160,"uuid":"236541293","full_name":"callyafiune/ngx-vertical-timeline","owner":"callyafiune","description":"Module for creating Responsive Vertical Timeline","archived":false,"fork":false,"pushed_at":"2025-08-08T22:13:08.000Z","size":1357,"stargazers_count":2,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-08T22:57:38.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/callyafiune.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-27T16:51:43.000Z","updated_at":"2025-08-08T22:13:11.000Z","dependencies_parsed_at":"2024-02-12T10:15:07.238Z","dependency_job_id":null,"html_url":"https://github.com/callyafiune/ngx-vertical-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/callyafiune/ngx-vertical-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callyafiune%2Fngx-vertical-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callyafiune%2Fngx-vertical-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callyafiune%2Fngx-vertical-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callyafiune%2Fngx-vertical-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callyafiune","download_url":"https://codeload.github.com/callyafiune/ngx-vertical-timeline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callyafiune%2Fngx-vertical-timeline/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269884082,"owners_count":24490353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T12:01:56.443Z","updated_at":"2025-08-11T12:06:41.376Z","avatar_url":"https://github.com/callyafiune.png","language":"CSS","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"readme":"# Angular Vertical Timeline (Angular 18 Version)\n\nAn Angular component for creating a responsive vertical timeline. This is an updated version for Angular 18+ using standalone components.\n\n### Live Example\n[On Stackblitz](https://stackblitz.com/~/github.com/callyafiune/ngx-vertical-timeline) (link to original example)\n\n## Installation\n\n```bash\n$ npm i ngx-vertical-timeline\n```\n## Usage\n\n### Import\n\nSince Angular 18 uses standalone components, you no longer need to import `NgxVerticalTimelineModule`. You can directly import the `NgxVerticalTimelineComponent` into your component.\n\n```typescript\n// your.component.ts\nimport { Component } from '@angular/core';\nimport { NgxVerticalTimelineComponent } from 'ngx-vertical-timeline';\n\n@Component({\n  selector: 'app-your-component',\n  standalone: true,\n  imports: [NgxVerticalTimelineComponent], // Import the component here\n  template: `\n    \u003clib-ngx-vertical-timeline [items]=\"items\"\u003e\u003c/lib-ngx-vertical-timeline\u003e\n  `\n})\nexport class YourComponent {\n  // ...\n}\n```\n\n### Component\n```typescript\n// your.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport { TimelineItem } from 'ngx-vertical-timeline';\n\n// ...\nexport class YourComponent implements OnInit {\n  items: TimelineItem[] = [];\n  externalVariable = 'hello';\n\n  ngOnInit(): void {\n    const self = this;\n\n    this.items.push({\n      label: 'Action',\n      icon: 'fa fa-calendar-plus-o',\n      content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,\n      title: '18 de June, 2019, 10:12',\n      command() {\n        alert(`test: ${self.externalVariable}`);\n      }\n    });\n\n    this.items.push({\n      label: 'Action',\n      icon: 'fa fa-plus',\n      content: `Ut enim ad minim veniam, quis nostrud exercitation ullamco\n      laboris nisi ut aliquip ex ea commodo consequat.`,\n      title: '11 de November, 2019, 12:00',\n      command() {\n        alert('Action!');\n      }\n    });\n  }\n}\n```\n### Template\n\n```html\n\u003clib-ngx-vertical-timeline [items]=\"items\"\u003e\u003c/lib-ngx-vertical-timeline\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallyafiune%2Fngx-vertical-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallyafiune%2Fngx-vertical-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallyafiune%2Fngx-vertical-timeline/lists"}