<p dir="auto">Hi,</p>
<p dir="auto">I've searched the sources to find an equivalent to the Parser and Formatter-concept in AngularJS 1.x. As it looks like, we can use custom Value-Accessors to format and parse bindings.</p>
<ul dir="auto">
<li>Is this a good idea?</li>
<li>If yes, is the following implementation (that works and parses/formats a German Date in the format Day.Month.Year) ok?</li>
<li>We are using multi-bindings here. How does Angular 2 behave, when there is more then one Accessor for one component?</li>
</ul>
<p dir="auto">Wishes,<br>
Manfred</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Directive, Renderer, ElementRef, Self, forwardRef, Provider} from 'angular2/core';

import {NG_VALUE_ACCESSOR, DefaultValueAccessor } from 'angular2/common';
import {CONST_EXPR} from 'angular2/src/facade/lang';

const PROVIDER = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() =&gt; DateValueAccessor), multi: true}));

@Directive({
  selector:
      'input[date]',
  host: {'(input)': 'input($event.target.value)', '(blur)': 'blur()'},
  bindings: [PROVIDER]
})
export class DateValueAccessor extends DefaultValueAccessor {

    constructor(_renderer: Renderer, _elementRef: ElementRef) {
       super(_renderer, _elementRef);
    }

    blur() {
        this.onTouched();
    }

    input(value) {

        // Write back to model   
        if (value) {
            value = value.split(/\./);
            value = value[2] + &quot;-&quot; + value[1] + &quot;-&quot; + value[0];
        }

        this.onChange(value);
    }

    writeValue(value: any): void {

        // Write to view
        if (value) {
            var date = new Date(value);
            value = date.getDate() + &quot;.&quot; + (date.getMonth()+1) + &quot;.&quot; + date.getFullYear(); 
        }

        super.writeValue(value);

    }

} "><pre class="notranslate"><code class="notranslate">import {Directive, Renderer, ElementRef, Self, forwardRef, Provider} from 'angular2/core';

import {NG_VALUE_ACCESSOR, DefaultValueAccessor } from 'angular2/common';
import {CONST_EXPR} from 'angular2/src/facade/lang';

const PROVIDER = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() =&gt; DateValueAccessor), multi: true}));

@Directive({
  selector:
      'input[date]',
  host: {'(input)': 'input($event.target.value)', '(blur)': 'blur()'},
  bindings: [PROVIDER]
})
export class DateValueAccessor extends DefaultValueAccessor {

    constructor(_renderer: Renderer, _elementRef: ElementRef) {
       super(_renderer, _elementRef);
    }

    blur() {
        this.onTouched();
    }

    input(value) {

        // Write back to model   
        if (value) {
            value = value.split(/\./);
            value = value[2] + "-" + value[1] + "-" + value[0];
        }

        this.onChange(value);
    }

    writeValue(value: any): void {

        // Write to view
        if (value) {
            var date = new Date(value);
            value = date.getDate() + "." + (date.getMonth()+1) + "." + date.getFullYear(); 
        }

        super.writeValue(value);

    }

} 
</code></pre></div>
<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>
When navigating between routes that reuse nodes (i.e. different URLs triggering the same route config branches), the guards are fired out of order. Specifically, the guards for the reused node are called before <em>any</em> other guards are checked.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The guard order should universally be deactivations from leaf to root and then activations from root to leaf.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
See <a href="http://plnkr.co/edit/TQjNmR?p=preview" rel="nofollow">http://plnkr.co/edit/TQjNmR?p=preview</a></p>
<p dir="auto">When changing both nodes in a navigation (i.e. from /A/A to /B/B), the guards are called in the order:</p>
<ul dir="auto">
<li>DEACTIVATE: branch</li>
<li>ACTIVATE: branch</li>
<li>DEACTIVATE: leaf</li>
<li>ACTIVATE: leaf</li>
</ul>
<p dir="auto">The order should be:</p>
<ul dir="auto">
<li>DEACTIVATE: leaf</li>
<li>DEACTIVATE: branch</li>
<li>ACTIVATE: branch</li>
<li>ACTIVATE: leaf</li>
</ul>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Maintaining a consistent ordering of guards. Deactivating a service tied to a parent route before the service tied to the child could break programmers expectations about flow.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Mac OSX, Atom, npm, webpack, served via webpack-dev-server (dev) &amp; nginx (prod).</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X, 2.1.X (plunker demonstrates 2.1.0)</li>
<li><strong>Browser:</strong> Only tested in Chrome 53, but should be relevant to all</li>
<li><strong>Language:</strong> TypeScript 2.0.3, but should be relevant to all</li>
</ul>