title: Angular 6: Call function on mat-cell
body: <p>I try to use the Angular Material Table which works well. My only problem is that I cant call a function which generates a value for a cell. </p>
  
  <p>This is the part of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;table mat-table [dataSource]="actuals"   *ngIf="actuals?.length &gt; 0"&gt;
  
            &lt;!-- Column Delivery Date --&gt;
            &lt;ng-container matColumnDef="deliveryDate" cdkColumnDef="deliveryDate"&gt;
              &lt;th mat-header-cell *matHeaderCellDef &gt;Datum&lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.deliveryDate}} &lt;/td&gt;
            &lt;/ng-container&gt;
            
            &lt;!-- Add header and rows --&gt;
            &lt;tr mat-header-row *matHeaderRowDef="['deliveryDate']"&gt;&lt;/tr&gt;
            &lt;tr mat-row *matRowDef="let row; columns: ['deliveryDate']"&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The dataSource "actuals" is an Array of "Actual" Objects which looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import {Time} from "@angular/common";
  
  export class Actual {
    id: number;
    coworkerName: string;
    taskCodeId: string;
    deliveryDate: Date;
    startTime: Time;
    endTime: Time;
    hours: number;
    comment: string;
    uploadType: string;
    modUser: string;
    modDate: Date;
    modComment: string;
    modStatus: string;
  
    constructor(id: number, coworkerName: string, taskCodeId: string, deliveryDate: Date, startTime: Time, endTime: Time, hours: number, comment: string, uploadType: string, modUser: string, modDate: Date, modComment: string, modStatus: string) {
      this.id = id;
      this.coworkerName = coworkerName;
      this.taskCodeId = taskCodeId;
      this.deliveryDate = deliveryDate;
      this.startTime = startTime;
      this.endTime = endTime;
      this.hours = hours;
      this.comment = comment;
      this.uploadType = uploadType;
      this.modUser = modUser;
      this.modDate = modDate;
      this.modComment = modComment;
      this.modStatus = modStatus;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>So everything works fine. But now i don't want to call </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{{element.deliveryDate}}</code></pre>
  </div>
  </div>
  </p>
  
  <p>as value - instead I want to call a function. For example </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{{ element.deliveryDate.getDate() }}
  &lt;!-- Or --&gt;
  {{ doSomething(element) }}</code></pre>
  </div>
  </div>
  </p>
  
  <p>but when I do that i get always an errormessage like </p>
  
  <pre><code>&gt;ERROR TypeError: _v.context.$implicit.deliveryDate.getDate is not a function
  &gt;&gt;    at Object.eval [as updateRenderer] (ActualsComponent.html:50)
  &gt;&gt;    at Object.debugUpdateRenderer [as updateRenderer] (core.js:22503)
  &gt;&gt;    at checkAndUpdateView (core.js:21878)
  &gt;&gt;    at callViewAction (core.js:22114)
  &gt;&gt;    at execEmbeddedViewsAction (core.js:22077)
  &gt;&gt;    at checkAndUpdateView (core.js:21874)
  &gt;&gt;    at callViewAction (core.js:22114)&gt;
  &gt;&gt;    at execComponentViewsAction (core.js:22056)
  &gt;&gt;    at checkAndUpdateView (core.js:21879)
  &gt;&gt;    at callViewAction (core.js:22114)
  </code></pre>
  
  <p>So what I'm doing wrong?</p>
  
  <p>Thanks for your help</p>