I have a items array as shown below inside parent ponent.ts file

items = [
    {text: 'Length' , value: 10 },
    {text : 'Degree' , value : "108"},
    {text : 'Edges' , value : [10,20,30]}
]

Then I have a ponent named app-label-values placed inside a *ngFor Loop in parent ponent like show below

<div *ngFor ="let item of items">
  <app-label-values
   label="item.text"
   value = "item.value">
  </app-label-values>
</div>

app-label-values ponent purpose is to display label and value corresponding to the label.

For eg. Age : 10

The label here will always be a text while the type of value can be dynamic ( number, strings, arrays)

So when the value is of type array I need to show only the length of the array ,like in our case the ponent should display 'Edges : 3' since [10,20,30].length is 3.

My aim is not to have this logic of type checking in the app-label-values ponent as I need it to be dumb and display only what is passed to it.

How can I solve this from parent ponent itself while rendering.

Kindly help.Thanks in advance.

I have a items array as shown below inside parent ponent.ts file

items = [
    {text: 'Length' , value: 10 },
    {text : 'Degree' , value : "108"},
    {text : 'Edges' , value : [10,20,30]}
]

Then I have a ponent named app-label-values placed inside a *ngFor Loop in parent ponent like show below

<div *ngFor ="let item of items">
  <app-label-values
   label="item.text"
   value = "item.value">
  </app-label-values>
</div>

app-label-values ponent purpose is to display label and value corresponding to the label.

For eg. Age : 10

The label here will always be a text while the type of value can be dynamic ( number, strings, arrays)

So when the value is of type array I need to show only the length of the array ,like in our case the ponent should display 'Edges : 3' since [10,20,30].length is 3.

My aim is not to have this logic of type checking in the app-label-values ponent as I need it to be dumb and display only what is passed to it.

How can I solve this from parent ponent itself while rendering.

Kindly help.Thanks in advance.

• javascript
• angular
• typescript
• ecmascript-6
• angular5

• value = "item.value.length" ?? – Muhammad Usman Commented Aug 9, 2018 at 5:33
• @GeorgeBailey That wont work as for number type values , value.length will throw and error and even though I convert number to string and apply length on it it will give me undesired result. eg. '10'.length = 2 – Shijil Narayanan Commented Aug 9, 2018 at 5:39
• Ok. I didn't really try this but you can check with value = "item.value.constructor == Array ? item.value.length : item.value" – Muhammad Usman Commented Aug 9, 2018 at 5:49
• Thanks George, constructor check appears to be a cleaner approach to me.Thanks :) – Shijil Narayanan Commented Aug 9, 2018 at 6:06
• value = "item.value.push ? item.value.length : item.value".I did this and it works in the template as well, as push method only belongs to array prototype.However I hope i get a better solution than this. – Shijil Narayanan Commented Aug 9, 2018 at 7:09

3 Answers 3

You can use an ngIf to check if the item.value has a length property. In the parent ponent,you can still pass to the child item.value and in the child ponent you display the value depending on the fact that it is an array or a number

1. check length property

   <div *ngIf="item.value?.length > {{item.value.length}} </div>

If you want to pass directly the length of array to your child ponent, you can consider using a ternary operator

value="item.value?.length ? item.value.length : item.value"

If you want to check for string value, you first check if there is a length property. Then one can use the + operator to parse the string. And with a second ternary operator, you can check if that is a number or an array

value="item.value?.length ? +item.value ? item.value : item.value.length : item.value" 

2. check constructor name

value="item.value.constructor.name === "Array" ? item.value.length : item.value"

Using the constructor, one can check also if the value is a string, number, etc.. live code

You can use if Else statement in the template with angular 4 and on wards...

<div *ngFor ="let item of items">
    <app-label-values *ngIf="item.value.length >= 0; else elseIfTemp" label="item.text" value = "item.value.length"> </app-label-values>
    <app-label-values label="item.text" value = "item.value" #elseIfTemp> 
    </app-label-values>
</div>

You can write a method who will cehck the type and return accordingly

here's is example

<div *ngFor ="let item of items">
  <app-label-values
   label="item.text"
   value = "checkType(item.value)">
  </app-label-values>
</div>

and in .ts file

checkType(value){
  if(typeof value === 'object'){
    return value.length;
  }else{
    return value;
  }
}

here's is an example