<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>
Cannot use <code class="notranslate">[routerLink]</code> on a <code class="notranslate">button</code>, only on an <code class="notranslate">a</code> tag (anchor).<br>
You get an error like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property (&quot;            &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                    &lt;li class=&quot;nav-item&quot;&gt;
                        [ERROR -&gt;]&lt;button [routerLinkActive]=&quot;['active']&quot; [routerLink]=&quot;['/public']&quot; class=&quot;nav-link btn btn-success-ou&quot;): Navbar@9:21"><pre class="notranslate"><code class="notranslate">EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("            &lt;ul class="nav navbar-nav"&gt;
                    &lt;li class="nav-item"&gt;
                        [ERROR -&gt;]&lt;button [routerLinkActive]="['active']" [routerLink]="['/public']" class="nav-link btn btn-success-ou"): Navbar@9:21
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Should be able to use <code class="notranslate">[routerLink]</code> on a <code class="notranslate">button</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">Any button with routerLink in it, like <code class="notranslate">&lt;button [routerLink]="['/public']"&gt;Public&lt;/button&gt;</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Same as you get with <code class="notranslate">&lt;a [routerLink]="['/public']"&gt;Public&lt;/a&gt;</code></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">I upgraded to router 3.0-alpha.7 from RC2 of router-deprecated, and now have to use <code class="notranslate">a</code> links where I had been using buttons.</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]</li>
<li><strong>Language:</strong> [TypeScript]</li>
</ul>
<p dir="auto"><em>From <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gdi2290/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gdi2290">@gdi2290</a> on June 21, 2016 5:37</em></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button [routerLink]=&quot; ['./'] &quot;&gt;Home&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">[routerLink]</span>="<span class="pl-s"> ['./'] </span>"<span class="pl-kos">&gt;</span>Home<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><em>Copied from original issue: angular/vladivostok#100</em></p>