title: How to use Spread Operator in angular component template
body: <p>I want to pass an array to a function from component template, the following is the code for my toolbar:</p>
  <p><strong>toolbar.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor=&quot;let item of items&quot;&gt;
     &lt;button mat-mini-fab [style.color]=&quot;item.color&quot; 
      (click)=&quot;item.command(...item.commandParams)&quot;&gt;
       &lt;i class=&quot;material-icons&quot;&gt;{{item.icon}}&lt;/mat-icon&gt;
     &lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  <p><strong>toolbar.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-toolbar',
    templateUrl: './toolbar.component.html',
    styleUrls: ['./toolbar.component.scss']
  })
  export class ToolbarComponent implements OnInit {
    items: ToolBarItem[]
    constructor() {}
    ngOnInit() {}
  }
  
  export class ToolBarItem {
    icon = 'border_clear';
    color: string;
    command: () =&gt; void;
    commandParams: any[];
  }
  </code></pre>
  <p>Here I want to init items of toolbar with varies commands.
  <br><strong>main.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>...
  items: [
          {
            icon: 'mode_edit',
            color: 'blue',
            command: (name, family) =&gt; {
              console.log('editClick!' + name + family);
            },
            commandParams: ['mohammad', 'farahmand'],
          },
          {
            icon: 'delete',
            color: 'red',
            command: () =&gt; {
              console.log('deleteClick!');
            },
          }
        ],
  ...
  </code></pre>
  <p>But i get this error:</p>
  <blockquote>
  <p>Error: Template parse errors: Parser Error: Unexpected token . at
  column 14 in [item.command(...item.commandParams)] in ...</p>
  </blockquote>