Display Icon in component in angular (primeng-table)

Question

I have a functionality to implement in which I am getting data from an API and I am using that to display it in a , now my requirement is to display a tick value in one of the columns for which the corresponding row holds a Boolean value for ex. a row has 6 columns and one of them is a Boolean value so I have to display tick in the column if the value is true and nothing if otherwise. I hope you understand the question.

I have a shared component called standardTable.component.ts to which I pass data such as colDef , rowData and other configurable data. the component I am currently making changes is called job-list-view.component.ts and the column definition is given below

this.cols = [
      { field: 'jobSegment', header: 'Service No', isBoolean: false, callback: this.navigateToJobDetails },
      { field: 'serviceName', header: 'Service' },
      { field: 'status', header: 'Status', isBoolean: false },
      { field: 'jobDateSpecial', header: 'Service Date', isBoolean: false, dateOnly: true },
      { field: 'orderDate', header: 'Order Date', isBoolean: false , dateOnly: true },
      { field: 'dueDate', header: 'Due Date', isBoolean: false, dateOnly: true},
      { field: 'witnessNames', header: 'Witness(es)', isBoolean: false, isArray: true  },
      { field: 'jobPriority', header: 'Priority', isHtml: true },
      { field: 'lastInvoiceDate', header: 'Last Invoice Date', callback: this.navigateToPayTab, dateOnly: true },
      { field: 'workOrderOrderedByClient', header: 'Hiring Company', isBoolean: false },
      { field: 'workOrderOrderedByContact', header: 'Hiring Contact', isBoolean: false },
      { field: 'witnessStartTimeWithTimeZone', header: 'Time', isBoolean: false },
      { field: 'caseName', header: 'Case Name', isBoolean: false},
      { field: 'isBackOrder', header:'Back Order'}
    ];

I have added the last col definition for Back Order as I want to display a tick mark for those values o rows that have isBackOrder as true. Is there a way I can achieve this ? and since the standardtable is a shared component I cant make much changes in that. any help would be appreciated!

If you aren't allowed to edit the template for the primeng-datatable in standardtable then your only choice is to create a new component. You can extend the standardtable.ts if there are common behaviors you need. — Mikkel Christensen, Oct 26 '21 at 08:00
@MikkelChristensen what If I can edit the standardtable how can I achieve it ? FYI I have multiple ngSwitchCases inside that in ng-template for the body. — Shubham Tiwari, Oct 26 '21 at 08:09

score 0 · Answer 1 · answered Oct 26 '21 at 11:59

So It was pretty simple I dont know how I missed it, you just have to pass the data as a boolean value and then in the column definition just add isBoolean:true and the p-table will automatically put a tick where ever the value is true and blank if false.

Display Icon in component in angular (primeng-table)

1 Answers1