<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Date pipe keeps the order of date components when using a custom format. According to the docs (<a href="https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html" rel="nofollow">https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html</a>) this shouldn't be the case: 'In javascript, only the components specified will be respected (not the ordering, punctuations, ...) and details of the formatting will be dependent on the locale.'</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The date pipe should ignore ordering and whitespaces etc, it should only care about the date components and format the output date according to the locale.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/fCZ4oVcn5qsnNssvSnar?p=preview" rel="nofollow">http://plnkr.co/edit/fCZ4oVcn5qsnNssvSnar?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To be able to use custom date formats.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
macOS Sierra, Visual Studio Code, NPM 3.10.3</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0 (Final release)</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> TypeScript 2.0.2</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   v6.3.0</li>
</ul>
<h2 dir="auto">Problem</h2>
<p dir="auto">Assume the following HTML snippet</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button title=&quot;OK&quot; tooltip=&quot;When done.&quot; (click)=&quot;...&quot; *if=&quot;...&quot;&gt;text&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">title</span>="<span class="pl-s">OK</span>" <span class="pl-c1">tooltip</span>="<span class="pl-s">When done.</span>" <span class="pl-c1">(click)</span>="<span class="pl-s">...</span>" <span class="pl-c1">*if</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>text<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<ol dir="auto">
<li>It looks like we are using browser <code class="notranslate">button</code></li>
<li>It looks like <code class="notranslate">title</code> and <code class="notranslate">tooltip</code> are properties of <code class="notranslate">button</code>.</li>
</ol>
<h3 dir="auto">Surprise</h3>
<p dir="auto">Now imagine that the actual implementation is:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({ selector:'button', properties: ['title'] })
@View(...)
class Button {
  title: string;
}

@Directives({selector:'[tooltip]', properties: ['tooltip']})
class Tooltip {
  tooltip: string;
}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">selector</span>:<span class="pl-s">'button'</span><span class="pl-kos">,</span> <span class="pl-c1">properties</span>: <span class="pl-kos">[</span><span class="pl-s">'title'</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-v">View</span><span class="pl-kos">(</span>...<span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">Button</span> <span class="pl-kos">{</span>
  <span class="pl-c1">title</span>: <span class="pl-c1">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

@<span class="pl-v">Directives</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>:<span class="pl-s">'[tooltip]'</span><span class="pl-kos">,</span> <span class="pl-c1">properties</span>: <span class="pl-kos">[</span><span class="pl-s">'tooltip'</span><span class="pl-kos">]</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span>
<span class="pl-k">class</span> <span class="pl-v">Tooltip</span> <span class="pl-kos">{</span>
  <span class="pl-c1">tooltip</span>: <span class="pl-c1">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">But after seeing the implementation the developer realizes that:</p>
<ol dir="auto">
<li><code class="notranslate">button</code> is not a native component</li>
<li><code class="notranslate">tooltip</code> is a separate, unrelated directive which decorates the <code class="notranslate">button</code></li>
</ol>
<p dir="auto">This creates a level of surprise for the developer and effects the readability of the HTML.</p>
<h2 dir="auto">Proposal</h2>
<p dir="auto">As a best practice (not enforced) recommend that:</p>
<ol dir="auto">
<li>All components are prefixed (but not their properties)</li>
<li>All directives are prefixed</li>
</ol>
<h2 dir="auto">Implication</h2>
<p dir="auto">Now let's rewrite the example with the above rules.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;md-button title=&quot;OK&quot; jq-tooltip=&quot;When done.&quot; (click)=&quot;...&quot; *ng-if=&quot;...&quot;&gt;text&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">md-button</span> <span class="pl-c1">title</span>="<span class="pl-s">OK</span>" <span class="pl-c1">jq-tooltip</span>="<span class="pl-s">When done.</span>" <span class="pl-c1">(click)</span>="<span class="pl-s">...</span>" <span class="pl-c1">*ng-if</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>text<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">It is immediately clear that:</p>
<ol dir="auto">
<li><code class="notranslate">md-button</code> is a custom component and <code class="notranslate">title</code> is its property</li>
<li><code class="notranslate">jq-tooltip</code> is a separate directive. Given that they have different prefixes (<code class="notranslate">md-</code> and <code class="notranslate">jq-</code>) it is unlikely that they have a communication channel.</li>
<li><code class="notranslate">ng-if</code> comes from yet separate library. (again unlikely that they somehow communicate)</li>
</ol>
<p dir="auto">But why prefix the <code class="notranslate">ng-if</code>? Well remember that it is short hand for:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template ng-if=&quot;...&quot;&gt;
  &lt;md-button title=&quot;OK&quot; jq-tooltip=&quot;When done.&quot; (click)=&quot;...&quot;&gt;text&lt;/button&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">ng-if</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">md-button</span> <span class="pl-c1">title</span>="<span class="pl-s">OK</span>" <span class="pl-c1">jq-tooltip</span>="<span class="pl-s">When done.</span>" <span class="pl-c1">(click)</span>="<span class="pl-s">...</span>"<span class="pl-kos">&gt;</span>text<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">And if we don't prefix it it would look like that <code class="notranslate">template</code> has <code class="notranslate">if</code> property, which is not the case.</p>