CODEWITHSUNDEEP
angularangular2-routing
Manuel
Manuel

Reputation: 9522

Linking from one component to another within an router-outlet in angular 2?

How can I route from one component to another within an router-outlet in angular 2?

login.component.html

... login form ...
<a (click)="gotoSignup()">gotosignup</a>
<a routerlink="signup">singup</a>
<a routerlink="/signup">/singup</a>
<a routerlink="/signup/">singup</a>
<a routerlink="['signup']">[singup]</a>
<a routerlink="[/signup]">[/singup]</a>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, RequestOptions, Headers} from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';

export class LoginComponent implements OnInit {

    constructor(public router: Router) {}

    gotoSignup() {
      this.router.navigate(["signup"]);
    }

}

In the sample above gotosignup is working thereas the router Link is not working.

Trying to use <a [routerLink] ... ist not working eiter. It results in the following error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
            <div class="well clearfix" style="font-size: larger;">
              <a [ERROR ->][routerlink]="['/signup']">

There are similar questions however they are not working for me. The seem to refer to pre alpa versions of angular 2 eg.:

Upvotes: 3

Views: 4804

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

You need to add imports: [RouterModule] to the @NgModule() where your are using routerLink

It should be routerLink instead of routerlink.
Directive selectors are case sensitive (component templates in general are case sensitive)

Upvotes: 6

Related Questions