CODEWITHSUNDEEP
formsangular2-routingangular2-forms
fcff94
fcff94

Reputation: 123

How to use routes in submit button form - Angular2

I'm new to Angular2 and I have been having some doubts about routes.

I'm using Angular Material and I have 2 forms: Login and Signup. When I click Submit in one of those forms I want to be redirected to a component called Portal.

This is my structure and each component has its own module:

I thought I could make it work with routerLink but I realized soon enough that it wasn´t possible. I know that I have to pass some event to the ngSubmit, but I'm not sure what...

If someone could explain me the process and guide me through the steps, I'd be very thankful.

Thank you.

Upvotes: 11

Views: 16137

Answers (3)

dagra
dagra

Reputation: 648

I am assuming you have followed the angular router guide here. Most probably your router will look something like

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "signup", component: SignupComponent },
  { path: "portal", component: PortalComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Now in LoginComponent you have do what @Jalay Oza provided as an answer. Similarly you have to do the same in SignUpComponent and PortalComponent.

Hope this helps.

Upvotes: 0

Jalay Oza
Jalay Oza

Reputation: 772

  • In the html use ngSubmit and will just need to call a function like below

    <form (ngSubmit)="onSubmit()">

  • Define the router in '@angular/router'

    import {Router} from '@angular/router';

  • In the controller put

    onSubmit() {
    this.router.navigateByUrl('/portal');
}

Hope this helps

Upvotes: 4

Tunisiano32
Tunisiano32

Reputation: 180

First you need to import 

import {Router} from '@angular/router';

Then inject it in the constructor

constructor(private router: Router) {}

Then either user ngSubmit event on the form or click event on the button, add the method and at the end of it do this.

this.router.navigate(['/portal']);

Upvotes: 8

Related Questions