@salilvnair/ngx-progress-tracker

- selector : ``ngx-progress-tracker`` - input : ``dataSource`` [array of NgxProgressTracker type]

Usage no npm install needed!

<script type="module">
  import salilvnairNgxProgressTracker from 'https://cdn.skypack.dev/@salilvnair/ngx-progress-tracker';
</script>

README

NgxProgressTracker

  • selector : ngx-progress-tracker
  • input : dataSource [array of NgxProgressTracker type]

example:

app.component.html
<ngx-progress-tracker [dataSource]="data">
    <ng-template #trackerHeader let-header>
        <div style="margin-left: 1px;word-break: break-all;">
            <span><strong>{{header}}</strong></span>
        </div>
    </ng-template>
     <ng-template #trackerContent let-content>
        <div *ngIf="content.key=='status'">
            <span style="display:inline-block;vertical-align: middle;"><strong>{{content.value}}</strong></span>
        </div>
        <div *ngIf="content.key=='date'">
            <span><strong>{{content.value}}</strong></span>
        </div>
     </ng-template>
</ngx-progress-tracker>
app.component.ts

data:NgxProgressTracker[] = [
    {
        "id": "1",
        "color": "green",
        "header": "Order",
        "content": [
            {
                "key": "status",
                "value": "Ordered"
            },
            {
                "key": "date",
                "value": "12/12/19"
            }
        ]
    },
    {
        "id": "2",
        "color": "orange",
        "header": "Packaging",
        "content": [
            {
                "key": "status",
                "value": "In progress"
            },
            {
                "key": "date",
                "value": "ETA 31/12/19"
            }
        ]
    },
    {
        "id": "3",
        "color": "grey",
        "header": "Delivery",
        "content": [
            {
                "key": "status",
                "value": ""
            },
            {
                "key": "date",
                "value": ""
            }
        ]
    }
  ];

output:

image