title: How to change time from 24 to 12 hour format in angular 5
body: <p>I have used input type <code>time</code> in my application to receive time:</p>
  
  <pre><code>  &lt;mat-input-container&gt;
  &lt;input matInput  formControlName="start_time" type="time" placeholder="Time Start"&gt;
  &lt;p class="invalid-text" *ngIf="dvrForm.controls.start_time.invalid &amp;&amp;
          (dvrForm.controls.start_time.dirty || dvrForm.controls.start_time.touched)"&gt;
    &lt;span *ngIf="dvrForm.controls.start_time.errors.required"&gt; Start Time is required.&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>
  And after i store data through input it gets stored in 24 hour format :</p>
  
  <p><a href="https://i.stack.imgur.com/GbQmr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GbQmr.png" alt="View Of database how the time is stored"></a></p>
  
  <p>So now when I display it in my view it gets displayed in the same format eg:    <code>23:11:00</code> , is it possible to use something like pipes to convert it into 12 hr format while displaying in the view.</p>