Pass a value from service to component or service to template

Question

I have a switch case statement in my Service method

myservice.ts

mapGridData(data) {
let colDefObj: GridColumnDef;
const colDefArray = [];
const idToNameMap = {};
let gridDataArray = [];
let aDT: any;
data.attributeMetaData.forEach(subItem => {
  if (subItem.isHidden !== 'true') {
    switch (subItem.attributeDataType) {
      case 'INTEGER':
        aDT = 'numeric';
        break;
      case 'STRING':
        aDT = 'text';
        break;
      case 'DATE':
        aDT = 'date';
        break;
    }
    idToNameMap[subItem.attributeId] = subItem.attributeName;
    colDefObj = new GridColumnDef(subItem);
    colDefArray.push(colDefObj);
  }
});
if (data.attributeValues === null) { data.attributeValues = []; }
gridDataArray = data.attributeValues.map(attributeObj => {
  const row = { objectId: attributeObj.objectId };
  attributeObj.attributeList.forEach(attr => {
    row[idToNameMap[attr.attributeId]] = attr.attributeValue;
  });
  return row;
});
return { gridDataArr: gridDataArray, colDefArr: colDefArray };
}

I am using this service in multiple components like below

mycomponent.ts

const gridDataObj = this.gridService.mapGridData(data);

And in my component html file I need to bind the aDT value like below

<kendo-grid-column *ngFor="let column of gridColDef" [filterable]="column.isFilterable === 'true' ? true : false" [sortable]="column.isSortable === 'true' ? true : false" [locked]="false" filter="{{aDT}}">

So, how can I bind a service value in my component's template? Please suggest. Thanks.

Answer 1

how can I bind a service value in my component's template? Please suggest.

To bind something with template , you need a variable at component level (not a variable inside component's function like let , const , var )

In template you are using {{aDT}} ie not part of any object just plain variable than you should declare it in your component ie public aDT and assign a value when you receive data from service.

Points to consider:

1. You are not assigning any aDT value to any object in your service as pointed out by @Michael D in comments, you just declared a variable, and each iteration you just assigned it a new value.

2. You are returning an object through service ie gridDataArray or colDefArray . On your requirements, if you want to render something like:

<kendo-grid-column *ngFor="let column of gridColDef" [filterable]="column.isFilterable === 'true' ? true : false" [sortable]="column.isSortable === 'true' ? true : false" [locked]="false" [filter]="column.aDT">

then it should be part of colDefObj object.

3. Not preferable way. In your service

.
.
 let gridDataArray = [];
 let aDT: any;
 let aDTArray = []; // declare a variable that holds all the values 
.
.
.
colDefObj = new GridColumnDef(subItem);
colDefArray.push(colDefObj);
aDTArray.push(aDT); // push your values here 
.
.
.
.

return { gridDataArr: gridDataArray, colDefArr: colDefArray, aDT: aDTArray }; // return it here 

and in component.ts

public aDT: any[];
public gridDataObj: any ;


const gridDataObj = this.gridService.mapGridData(data);
this.adT = gridDataObj.adtArray ;
this.gridColDef = gridDataObj.colDefArr ;

and in template

<kendo-grid-column 
*ngFor="let column of gridColDef; let i = index" 
[filterable]="column.isFilterable === 'true' ? true : false" 
[sortable]="column.isSortable === 'true' ? true : false" 
[locked]="false" 
[filter]="aDT[i]">
<!-- use on basis of index -->

If it helps you somewhere, you should revisit and check your service on how to return aDT on your needs.

PS

in template for filter instead of doing filter={{aDT}} you should go for [filter]="aDT"