Navigate to another page with a button in angular 2
AngularAngular Problem Overview
I am trying to navigate to a another page by clicking a button but it fails to work. What could be the problem. I am now learning angular 2 and it's a bit tough for me now.
//Routes/Path in a folder call AdminBoard
export const AdminRoutes: Routes =[
{
path: 'dashboard',
component: AdminComponent,
children: [
{path: '', redirectTo: 'Home'},
{path: 'Home', component: HomeComponent},
{path: 'Service', component: ServiceComponent},
{path: 'Service/Sign_in', component:CustomerComponent}
]
}
];
//Button is also in a different folder. Click button to navigate to this page {path: 'Service/Sign_in', component:CustomerComponent}
<button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>
Angular Solutions
Solution 1 - Angular
Use it like this, should work:
<a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>
You can also use router.navigateByUrl('..')
like this:
<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>
import { Router } from '@angular/router';
btnClick= function () {
this.router.navigateByUrl('/user');
};
Update 1
You have to inject Router
in the constructor like this:
constructor(private router: Router) { }
only then you are able to use this.router
. Remember also to import RouterModule
in your module.
Update 2
Now, After Angular v4 you can directly add routerLink
attribute on the button (As mentioned by @mark in comment section) like below (No "'/url?" since Angular 6, when a Route in RouterModule exists) -
<button [routerLink]="'url'"> Button Label</button>
Solution 2 - Angular
You can use routerLink in the following manner,
<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">
or use <button [routerLink]="['./url']">
in your case, for more info you could read the entire stacktrace on github https://github.com/angular/angular/issues/9471
the other methods are also correct but they create a dependency on the component file.
Hope your concern is resolved.
Solution 3 - Angular
<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>
import { Router } from '@angular/router';
btnClick= function () {
this.router.navigate(['/user']);
};
Solution 4 - Angular
It is important that you decorate the router link and link with square brackets as follows:
<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>
Where "/service" in this case is the path url specified in the routing component.
Solution 5 - Angular
Having the router link on the button seems to work fine for me:
<button class="nav-link" routerLink="/" (click)="hideMenu()">
<i class="fa fa-home"></i>
<span>Home</span>
</button>
Solution 6 - Angular
There were many comments and answers which suggested to use routerLink
- in different ways. I think, the following is the best way nowadays:
A relative simple link:
<button [routerLink]="/Service/Sign_in">Add Customer</button>
also possible with an array like
<button [routerLink]="['/Service', serviceId, 'Sign_in']">Add Customer</button>
to get a link to /Service/2102/Sign_in
where serviceID
is 2102.
If you have query parameters use:
<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}">Add Customer</button>
and you receive a link to /Service/Sign_in?mode=red
.
If your current url already has params (eg /Service/foo?status=bar
), you can add keep and add additional params with:
<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="merge">Add Customer</button>
which should give you a link to /Service/foo?status=bar&mode=red
.
Or you can even preserve the existing ones (if some exist, eg if you are on /Service/foo?mode=blue
) with:
<button [routerLink]="/Service/Sign_in" [queryParams]="{mode:'red'}" queryParamsHandling="preserve">Add Customer</button>
and you receive a link to /Service/Sign_in?mode=blue
.
Some more modes to preserve the history or work with fragments are explained here: https://angular.io/api/router/RouterLink