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.
Share Improve this question edited Aug 9, 2018 at 7:40 edkeveked 18.4k10 gold badges59 silver badges95 bronze badges asked Aug 9, 2018 at 5:30 Shijil NarayananShijil Narayanan 1,01910 silver badges21 bronze badges 5-
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
Reset to default 7You 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
- 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"
- 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