{"id":20415810,"url":"https://github.com/rbkgh/ngfluentordertracker","last_synced_at":"2026-04-18T01:34:13.910Z","repository":{"id":90539655,"uuid":"142568002","full_name":"RbkGh/NgFluentOrderTracker","owner":"RbkGh","description":"Your one-stop beautiful order tracker component for angular. ","archived":false,"fork":false,"pushed_at":"2018-07-28T13:33:15.000Z","size":191,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T03:41:30.030Z","etag":null,"topics":["angular","angular-component","angular-library","angular-widget","angular2","angular4","angular6","ionic","ionic-framework"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/RbkGh.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":"2018-07-27T11:16:35.000Z","updated_at":"2018-08-25T12:21:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"45e30354-0be4-42b3-ae5d-98661545ba4e","html_url":"https://github.com/RbkGh/NgFluentOrderTracker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/RbkGh/NgFluentOrderTracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RbkGh%2FNgFluentOrderTracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RbkGh%2FNgFluentOrderTracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RbkGh%2FNgFluentOrderTracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RbkGh%2FNgFluentOrderTracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RbkGh","download_url":"https://codeload.github.com/RbkGh/NgFluentOrderTracker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RbkGh%2FNgFluentOrderTracker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31953515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"ssl_error","status_checked_at":"2026-04-18T00:39:20.671Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","angular-component","angular-library","angular-widget","angular2","angular4","angular6","ionic","ionic-framework"],"created_at":"2024-11-15T06:17:38.818Z","updated_at":"2026-04-18T01:34:13.877Z","avatar_url":"https://github.com/RbkGh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgFluentOrderTracker - Your one-stop beautiful order tracker component for angular apps \n\nGithub Url : \n=================\n[https://github.com/RbkGh/NgFluentOrderTracker](https://github.com/RbkGh/NgFluentOrderTracker)\n\nDemo\n=================\n![](https://github.com/RbkGh/NgFluentOrderTracker/raw/master/demo/demoimage.png)\n\nTable of contents\n=================\n * [Getting started \u0026 Usage](#getting-started)\n * [Contributing](#contributing)\n * [Development](#contributing)\n \n ## Getting started \u0026 Usage\n ### Step 1: Install `ng-fluent-order-tracker`:\n ```shell\n npm i ng-fluent-order-tracker\n ```\n ### Step 2: (i) Import the FluentOrderTrackerModule by including it in its @NgModule imports array:\n ```js\n\nimport {FluentOrderTrackerModule} from './modules/fluent-order-tracker/fluent-order-tracker.module';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FluentOrderTrackerModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n ```\n \n ### Step 2 (ii) initialize orderEntities in your component.Eg : \n ```js\n\nimport {Component, OnInit} from '@angular/core';\nimport {OrderEntity} from './modules/fluent-order-tracker/models/order-entity';\nimport {OrderState} from './modules/fluent-order-tracker/models/order-state.enum';\nimport {OrderStateTextUtil} from './modules/fluent-order-tracker/util/order-state-text.enum';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  orderEntities: Array\u003cOrderEntity\u003e = [];\n\n  ngOnInit(): void {\n    this.initOrderEntities();\n  }\n\n  initOrderEntities() {\n    const orderEntityProcessed: OrderEntity = {} as OrderEntity;\n    orderEntityProcessed.orderState = OrderState.COMPLETED;\n    orderEntityProcessed.orderStateText = OrderStateTextUtil.ORDER_PROCESSED;\n\n    const orderEntityApproved: OrderEntity = {} as OrderEntity;\n    orderEntityApproved.orderState = OrderState.DECLINED;\n    orderEntityApproved.orderStateText = OrderStateTextUtil.ORDER_DECLINED;\n\n    const orderEntityShipped: OrderEntity = {} as OrderEntity;\n    orderEntityShipped.orderState = OrderState.TODO;\n    orderEntityShipped.orderStateText = OrderStateTextUtil.ORDER_SHIPPED;\n\n    const orderEntityInTransit: OrderEntity = {} as OrderEntity;\n    orderEntityInTransit.orderState = OrderState.COMPLETED;\n    orderEntityInTransit.orderStateText = OrderStateTextUtil.ORDER_IN_TRANSIT;\n\n    const orderEntityDelivered: OrderEntity = {} as OrderEntity;\n    orderEntityDelivered.orderState = OrderState.COMPLETED;\n    orderEntityDelivered.orderStateText = OrderStateTextUtil.ORDER_DELIVERED;\n\n    this.orderEntities.push(orderEntityProcessed);\n    this.orderEntities.push(orderEntityApproved);\n    this.orderEntities.push(orderEntityShipped);\n    this.orderEntities.push(orderEntityInTransit);\n    this.orderEntities.push(orderEntityDelivered);\n\n  }\n}\n\n\n```\n ### Step 3 : Use the selector in a component template : \n ```html\n\u003capp-fluent-order-tracker [orderEntities]=\"orderEntities\"\u003e\u003c/app-fluent-order-tracker\u003e\n\n```\n# checkout  how to populate orderEntities in app.component.ts for more details\n\n ## Contributing\n \n Contributions are welcome. You can start by looking at [issues](https://github.com/RbkGh/NgFluentOrderTracker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) with label *Help wanted*  or creating new Issue with proposal or bug report.\n Note that we are using https://conventionalcommits.org/ commits format.\n \n ## Development\n ```npm run packagr```\n \n ```npm pack ``` in dist folder\n \n ```npm login``` \n \n ```npm publish dist```\n ## Inspiration\n This library is inspired by [Order Status Tracking](https://codepen.io/manit/pen/uFnJw) \n \n## Warning\nLibrary is under active development and may have API breaking changes for subsequent major versions after 1.0.0.\n\n\n\nAuthor(s)\n---------\n- Rodney Boachie\n\n\n### License: \n\n    Copyright (C) 2018 Rodney Boachie \u003crbk.unlimited@gmail.com\u003e\n    This file is part of NgFluentOrderTracker\n    NgFluentOrderTracker is free software: you can redistribute it and/or modify\n    it under the terms of the GNU General Public License as published by\n    the Free Software Foundation, either version 3 of the License, or\n    (at your option) any later version.\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU General Public License for more details.\n    You should have received a copy of the GNU General Public License\n    along with this program.  If not, see \u003chttp://www.gnu.org/licenses/\u003e.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbkgh%2Fngfluentordertracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbkgh%2Fngfluentordertracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbkgh%2Fngfluentordertracker/lists"}