How to resolve error while formatting date as dd/MM/yyyy using pipes?

We will be doing this by taking an example. In the example below we are using the date pipe to format my date, but we just can't get the exact format we want without a workaround. Maybe we are understanding pipes in the wrong way.

//our root app component

import {Component} from 'angular2/core'

@Component({

  selector: 'my-app',

  providers: [],

  template: `

      Hello {{name}}

{{date | date: 'ddMMyyyy'}}, should be

      {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}

  `,

  directives: []

})

export class App {

  constructor() {

    this.name = 'Angular2'

    this.date = new Date();

  }

}

To resolve our above problem we will format a date value according to locale rules.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Now we can do the conventional way: {{valueDate | date: 'dd/MM/yyyy'}}

Introducing Angular pipes, a way to write display-value transformations that we can declare in our HTML.