title: Angular - Parser Error: Cannot have a pipe in an action expression at column 21 in [form.loading_date | date: 'dd/MM/yyyy'=$event]
body: <p>I am using Angular-7 for web portal application. I have a Material Datepicker from which I would like to only get date with no timestamp. Also it should be in this format: dd/mm/yyyy.</p>
  
  <p>my.component.ts</p>
  
  <pre><code>import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { ApiService } from '../../shared/services/api.service';
  import { TokenService } from '../../shared/services/token.service';
  import { Router } from '@angular/router';
  import { SnotifyService } from 'ng-snotify';
  import swal from 'sweetalert2';
  import { FormControl } from '@angular/forms';
  
  
  @Component({
    selector: 'app-client-quotes-landing',
    templateUrl: './client-quotes-landing.component.html',
    styleUrls: ['./client-quotes-landing.component.scss']
  })
  export class ClientQuotesLandingComponent implements OnInit {
  
    public form = {
      first_name : null,
      last_name : null,
      email : null,
      phone : null,
      address : null,
      business_name : null,
      truck_required : null,
      truck_type : null,
      quote_origin : null,
      quote_destination : null,
      commodity : null,
      loading_date : null,
      comment : null,
    };
  
    public error = {
      'first_name' : null,
      'last_name' : null,
      'email' : null,
      'phone' : null,
      'address' : null,
      'business_name' : null,
      'truck_required' : null,
      'truck_type' : null,
      'quote_origin' : null,
      'quote_destination' : null,
      'commodity' : null,
      'loading_date' : null,
      'comment' : null
    };
  
    constructor(
      private api: ApiService,
      private token: TokenService,
      private router: Router,
      private notify: SnotifyService,
      ) {
       }     
  
    ngOnInit() {
      window.dispatchEvent(new Event('load'));
      window.dispatchEvent(new Event('resize'));
    }
  
    onSubmit(){
      this.notify.clear();
      var header = {
        'Content-Type': 'application/json'
      }
      return this.api.post('clientquotelanding', this.form, header).subscribe(
        error =&gt; this.errorHandle(error),
      );
    }
  
    tokenHandler(data){
      this.notify.clear();
      console.log(data);
    }
  
    errorHandle(error){
      this.notify.clear();
      console.log(error);
      this.error = error.error.errors;
    }
  
  }
  
  </code></pre>
  
  <p>my.component.html</p>
  
  <pre><code>&lt;div class="col-xs-6"&gt;
    &lt;label for="loading_date"&gt;Loading Date&lt;span style="color:red;"&gt; *&lt;/span&gt;&lt;/label&gt;
    &lt;div class="input-group date" style="width: 100%;" &gt;
     &lt;mat-form-field&gt;
       &lt;input matInput [matDatepicker] = "picker" placeholder = "Choose a date" name="loading_date" [(ngModel)]="form.loading_date | date: 'dd/MM/yyyy'" #loading_date="ngModel" [ngClass]="{'is-invalid' : loading_date.invalid &amp;&amp; ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)}"   required&gt;
       &lt;mat-datepicker-toggle matSuffix [for] = "picker"&gt;&lt;/mat-datepicker-toggle&gt;
       &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
       &lt;/mat-form-field&gt;
       &lt;div class="form-feedback" *ngIf="loading_date.invalid &amp;&amp; ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)"&gt;
        &lt;div style="color:red;" *ngIf="loading_date.errors?.required"class="alert alert-danger"&gt;Loading Date is required.&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my.component.html, I tried to use built-in pipe to resolve date issue.</p>
  
  <p>When I served the application, I got this error on the console:</p>
  
  <p><a href="https://i.stack.imgur.com/21taH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/21taH.png" alt="date error"></a></p>
  
  <p>How do I resolve it?</p>