Using Array.map in Angular Interpolation

you could find some work around's to make this work, but my answer is you shouldn't do this as function calls in template negatively impact performance, as do impure pipes which this would require to be reliable.

Consider instead:

mappedArray = [];

ngOnInit() {
  this.mappedArray = object.array.map( (o)=> o.property );
}

{{ mappedArray }}

clean, reliable, easy to read / modify and easy to understand. Also gives more fine tuned control over when your functions evaluate.

You can't define functions in Angular expressions. So you have to use pipes instead which are optimized for the templates. They are reusable across other components.

<pre>{{ object.array | pluck:"property" | json }}</pre>

With a pluck pipe:

@Pipe({name: 'pluck'})
export class PluckPipe implements PipeTransform {
  transform (input: any[], key: string): any {
      return input.map(value => value[key]);
  }
}

It's not recommended to call functions on the component to calculate values for the template. This moves work from the component to the template, and if you need data to be mutated then do that work in ngOnInit() or in ngOnChanges() instead.

Pipes have purity which means they are executed only when the inbound data is mutated. When you call a function like {{doWork(object.array)}} then Angular does not know if the function doWork() is pure or not. So it assumes it is not pure and calls it for each change detection.

Updated:

Anytime you work with Arrays in Angular you should be treating them as immutable. Where you create a new instance of that Array when you need to modify it. For example; items = [...items, newItem]; instead of items.push(newItems).

This resolves change detection problems related to pipes, ngFor, OnPush change detection and state stores.

https://medium.com/dailyjs/the-state-of-immutability-169d2cd11310

you can just create a get property and use it like this

component

   data = [
     {property : 'a'},
     {property : 'b'},
     {property : 'c'},
     ]

  get properties () {
    return this.data.map( (o)=> o.property )
  }

template

{{properties | json}} 

demo🔥🔥

In your component, you can have a function:

someFunction(arr: any[]){
    return arr.map(o => o.property);
}

And in your html template, assuming arr is some defined array already, you can simply just call that function where you want the array to be used. Example:

<div *ngFor="let object of someFunction(arr)>
    {{object.property}}
</div>

Unfortunately, there is no way to directly invoke code like that directly in the html template without some use of functions.

*it is also worth noting this code is not very optimized because someFunction() will be repeatedly getting called over and over again due to where it exists in the template.