<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>
The <code class="notranslate">NgModel</code> in the <code class="notranslate">&lt;select&gt;</code> updates the data correctly (as object), but when loading the data and placing a <code class="notranslate">[attr.selected]="true"</code> it doesn't select that value from options</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Loading the form with data, if a <code class="notranslate">selected</code> flag is on a <code class="notranslate">&lt;option&gt;</code> inside a <code class="notranslate">&lt;select&gt;</code> I'd expect that to be selected.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, NgModule} from '@angular/core'
import {BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    &lt;select [(ngModel)]=&quot;data.currency&quot; name=&quot;currency&quot; id=&quot;currency&quot;&gt;
        &lt;option *ngFor=&quot;let c of currs&quot; [ngValue]=&quot;c&quot; [attr.selected]=&quot;c.value == data.currency.value ? true : null&quot;&gt;{{ c.name  }}&lt;/option&gt;
    &lt;/select&gt;
  `,
})
export class App {

  currs = [
    {name: &quot;EURO&quot;, value: &quot;EUR&quot;},
    {name: &quot;Dollar&quot;, value: &quot;DOLLAR&quot;},  
    {name: &quot;British Pound&quot;, value: &quot;Pound&quot;}
  ];
  
  data: {
    currency: currs[2]
  };

}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">NgModule</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">BrowserModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/platform-browser'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">FormsModule</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/forms'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">    &lt;select [(ngModel)]="data.currency" name="currency" id="currency"&gt;</span>
<span class="pl-s">        &lt;option *ngFor="let c of currs" [ngValue]="c" [attr.selected]="c.value == data.currency.value ? true : null"&gt;{{ c.name  }}&lt;/option&gt;</span>
<span class="pl-s">    &lt;/select&gt;</span>
<span class="pl-s">  `</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">App</span> <span class="pl-kos">{</span>

  <span class="pl-c1">currs</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
    <span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s">"EURO"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"EUR"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s">"Dollar"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"DOLLAR"</span><span class="pl-kos">}</span><span class="pl-kos">,</span>  
    <span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s">"British Pound"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-s">"Pound"</span><span class="pl-kos">}</span>
  <span class="pl-kos">]</span><span class="pl-kos">;</span>
  
  <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">currency</span>: <span class="pl-smi">currs</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span>

@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">imports</span>: <span class="pl-kos">[</span> <span class="pl-smi">BrowserModule</span><span class="pl-kos">,</span> <span class="pl-smi">FormsModule</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">declarations</span>: <span class="pl-kos">[</span> <span class="pl-smi">App</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">bootstrap</span>: <span class="pl-kos">[</span> <span class="pl-smi">App</span> <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppModule</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Saving <code class="notranslate">objects</code> from  <code class="notranslate">&lt;select&gt;</code> via <code class="notranslate">ngModel</code> is very helpful and prevents an extra lookup when using the data. But when returning to the form, the correct option doesn't show. It just shows blank <code class="notranslate">&lt;select&gt;</code> even if the data is accurate and the model is set correctly.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu 16.04<br>
Chrome 56.0</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome 56 | Firefox 51 |</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript 2.1 | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = v6.9.4</p>
</li>
</ul>
<h4 dir="auto">FIX</h4>
<p dir="auto"><a href="https://github.com/angular/angular/blob/2.4.7/modules/%40angular/forms/src/directives/select_control_value_accessor.ts#L113">https://github.com/angular/angular/blob/2.4.7/modules/%40angular/forms/src/directives/select_control_value_accessor.ts#L113</a><br>
Setting a 2nd lookup for the <code class="notranslate">selected</code> attr and return the value would do the trick.<br>
I think</p>
<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
[ ] 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
[ ] 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>
I have a route with a parameter: <code class="notranslate">path: 'a/:p'</code> and this parameter might contain space characters.<br>
When my app is loaded and I navigate to that route via <code class="notranslate">['/a', 'with space']</code>, my component receives <code class="notranslate">activatedRoute.snapshot.params['p'] == 'with space'</code> and my browser's address bar shows <code class="notranslate">.../a/with%20space</code> in Edge or <code class="notranslate">.../a/with space</code> in Firefox.</p>
<p dir="auto">When I now refresh my browser, the router navigates to the correct route, but my component receives <code class="notranslate">activatedRoute.snapshot.params['p'] == 'with%20space'</code>.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">The latter should work like the first.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.3</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5 | Dart]</li>
</ul>