One month behind date show in angular 4

Question

One month behind date show in angular 4
Primeng Calendar Add 2018-04-30 & show {3/30/2018}

Html File:

<div class="col-md-8 noPadding">
        <p-calendar dataType="date" name="PublishDate" [ngModelOptions]="{utc: 
            'true'}" [ngModel]="resource.PublishDate | date:'yyyy-MM-dd'" 
            (ngModelChange)="resource.PublishDate = $event" showOtherMonths="true" 
            dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar>
</div>

Typescript:

update() {
                this.loading = true;
                this.publishDate  = this.resource.PublishDate.getMonth() + '-' + this.resource.PublishDate.getDate() + '-' + this.resource.PublishDate.getFullYear();

               this.resource.PublishDate = this.publishDate
                let data = JSON.stringify(this.resource); 


                this.resourceService.putForm('Resource').subscribe((response: any) => {
                    detail: 'Resource is Updated' });
                }, (error: any) => {

                });
            }

Answer 1

ts:

this.publishDate = this.datePipe.transform(this.resource.PublishDate);

html:

<p-calendar dataType="date" name="PublishDate" [ngModelOptions]="{utc: 
    'true'}" [ngModel]="resource.PublishDate | date:'yyyy-MM-dd'"
       (ngModelChange)="resource.PublishDate = $event" showOtherMonths="true"
          dateFormat="yy-mm-dd" [showIcon]="true">
</p-calendar>

app.module.ts

providers: [
    DatePipe
]

by using angular date pipe my problem is resolved thankyou https://angular.io/api/common/DatePipe