title: "Fix" Angular UTC Dates
body: <p>I am building an Angular 2.x app that consumes a REST API for its data.  The API delivers some date information in JSON form:</p>
  
  <pre><code>  "punchDate": "2017-05-17T00:00:00",
    "timezone": "CST"
  </code></pre>
  
  <p>If I ask Angular to print punchDate to screen (in my timezone which is CST) it will show: May 16, 2017, 7:00:00 PM.  </p>
  
  <p>When that date gets assigned to a date picker it says the same, "May 16, 2017" when what the API really intended for me to do was have the date picker say "May 17, 2017".</p>
  
  <p>The JSON response comes out of the API, into an Angular Service which converts it to a TypeScript interface, and that service get used throughout the app.</p>
  
  <p><strong>Class:</strong></p>
  
  <pre><code>export interface Punch{ 
      punchDate: Date;
      timezone: string;
  }
  </code></pre>
  
  <p><strong>Service Method:</strong></p>
  
  <pre><code>public get = (id: number): Observable&lt;Punch&gt; =&gt; {
      return this.http.get('/api/punch/' + id).map(res =&gt; res.json());
  }
  </code></pre>
  
  <p>How do I get Angular to treat this date how the API intended?</p>
  
  <p>Plunkr to demonstrate problem:</p>
  
  <p><a href="https://plnkr.co/edit/hYYRbyWLFBvzh4uGBJay" rel="nofollow noreferrer">https://plnkr.co/edit/hYYRbyWLFBvzh4uGBJay</a></p>