How to navigate to other page in angular 6?
Solution 1
@sasi.. try like this,
<a routerLink="/registration"><button class="btn btn-success" > Submit </button></a>
Update :
In order to use the routing in your application, you must register the components which allows the angular router to render the view.
We need register our components in App Module
or any Feature Module
of it (your current working module) in order to route to specific component view.
We can register components in two ways
-
.forRoot(appRoutes)
for app level component registration likefeatuteModules
(ex. UserManagement) andcomponents
which you want register atroot level
. -
.forChild(featureRoutes)
for feature moduleschild components
(Ex. UserDelete, UserUpdate).you can register something like below,
const appRoutes: Routes = [ { path: 'user', loadChildren: './user/user.module#UserModule' }, { path: 'heroes', component: HeroListComponent }, ]; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes ) ],
P.S : In order to navigate from one component to another, you must include the
RouterModule
in corresponding Module Imports array from@angular/router
package.
You can navigate one to another page in Angular in Two ways. (both are same at wrapper level but the implementation from our side bit diff so.)
routerLink
directive gives you absolute path match like navigateByUrl()
of Router
class.
<a [routerLink]=['/registration']><button class="btn btn-success" > Submit </button></a>
If you use dynamic values
to generate the link, you can pass an array
of path segments, followed by the params
for each segment.
For instance routerLink=['/team', teamId, 'user', userName, {details: true}]
means that we want to generate a link to /team/11/user/bob;details=true
.
There are some useful points to be remembered when we are using routerLink
.
- If the first segment begins with
/
, the router will look up the route from the root of the app. - If the first segment begins with
./
, or doesn't begin with a slash, the router will instead look in the children of the current activated route. - And if the first segment begins with
../
, the router will go up one level.
for more info have look here.. routerLink
We need inject Router
class into the component in order to use it's methods.
There more than two methods to navigate like navigate()
, navigateByUrl()
, and some other.. but we will mostly use these two.
-
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.
this.route.navigate(['/team/113/user/ganesh']);
navigate()
command will append the latest string is append to existing URL. We can also parse thequeryParams
from this method like below,this.router.navigate(['/team/'], { queryParams: { userId: this.userId, userName: this.userName } });
You can get the these values with
ActivatedRoute
in navigated Component. you can check here more aboutparamMap
,snapshot(no-observable alternative)
. -
Navigate based on the provided URL, which must be absolute.
this.route.navigateByUrl(['/team/113/user/ganesh']);
navigateByUrl()
is similar to changing the location bar directly–we are providing the whole new URL.
Solution 2
I am using angular 7 and I solved it in this way into my project.
1.First We need to implement this Modules to our app.module.ts file
import { AppRoutingModule} from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
],
})
2.Then Open your.component.html file and then fire a method for navigate where you want to go
<button class="btn btn-primary" (click)="gotoHome()">Home</button>
3.Then Go your.component.ts file for where you want to navigate. And add this code there.
import { Router } from '@angular/router';
export class YourComponentClassName implements OnInit {
constructor(private router: Router) {}
gotoHome(){
this.router.navigate(['/home']); // define your component where you want to go
}
}
4.And lastly want to say be careful to look after your app-routing.module.ts where you must have that component path where you want to navigate otherwise it will give you error. For my case.
const routes: Routes = [
{ path:'', component:LoginComponent},
{ path: 'home', component:HomeComponent }, // you must add your component here
{ path: '**', component:PageNotFoundComponent }
];
Thanks I think, I share all of the case for this routing section. Happy Coding !!!
Solution 3
<a class="nav-link mt-1" [routerLink]="['/login']"><i class="fa fa-sign-in"></i> Login</a>
Solution 4
navigateByUrl expects an absolute path, so a leading / might take you to the right page
You could also use navigate and don't need the leading / but the syntax is slightly different as it expects an array for the path
Related videos on Youtube
sasi
Updated on July 09, 2022Comments
-
sasi almost 2 years
Im trying to redirect my page from login to another page. Im following this code.
My login component ts file:
import { Router } from '@angular/router'; constructor(private router: Router) { } funLogin(mobilenumber){ this.router.navigateByUrl('registration'); }
In my html Im calling this function in a submit btn,
<button class="common-btn btn" (click)="funLogin(mobileNo.value)">Submit</button> In my app.login.routing file, export const loginRouting: Routes = [ { path: '', component: DashboardRootComponent, canActivateChild: [], children: [ { path: '', component: DashboardComponent, pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'registration', component: RegistrationComponent }, ] } ]
I have tried with "this.router.navigate" & referredlot of links. But it didnt work. Can anyone please tell me where Im going wrong or if you could give me a workingh sample it would be better.
-
user184994 over 5 yearsAre you getting any errors when you try the code above?
-
-
Red almost 4 years<button [routerLink]="['/home']">Home</button>