In javascript, you would need this:
product.ProductCategoryRelations
.map(r => r.Category.Name)
.join(',')
to put it in context:
let product = {
"Id": 2,
"Name": "Product 1",
"ProductCategoryRelations": [
{
"Id": 3,
"ProductId": 2,
"CategoryId": 2,
"Active": true,
"Category": {
"Id": 2,
"ParentId": 1,
"Name": "Category 1"
}
},
{
"Id": 4,
"ProductId": 2,
"CategoryId": 2,
"Active": true,
"Category": {
"Id": 2,
"ParentId": 1,
"Name": "Category 2"
}
}
],
};
console.log(
product.ProductCategoryRelations
.map(r => r.Category.Name)
.join(',')
);
Now you can use .join(',') in Angular template syntax, but you cannot use the .map() bit. So I suspect the easiest way would be to add a utility function to your component that does this for you:
getCategoryNames(product) {
return product.ProductCategoryRelations.map(r => r.Category.Name);
}
and then do it in the template like this:
{{getCategoryNames(product).join(',')}}
