CODEWITHSUNDEEP
angularangular-routing
Steve Doson
Steve Doson

Reputation: 713

How to navigate to a new page using Angular 2?

On following the normal routing procedure, by making different components, after clicking the Submit button, the content of the next component appears bellow the button itself (as is below the submit button)

But I want to go to a different page altogether after clicking the Submit button, like the following image.

On clicking the Submit button on the left page, I want to go to a new page which will show Hello Member

The following is what I am doing, and as a result the content of the child component (i.e, Hello Member) is getting appended below.

<button mat-raised-button color="primary" id="button" type="submit" routerLink="/page2" routerLinkActive="active">Submit</button> <router-outlet></router-outlet>

But that is not what I want.

On clicking the Submit button I want to be directed to a completely new page where Hello Member should appear, as I have showed in the second image.

How can I go about doing that?

Upvotes: 0

Views: 2687

Answers (2)

andrea06590
andrea06590

Reputation: 1299

in angular, you can use something called Route.

The easiest way to start with is the tour of heroes https://stackblitz.com/edit/angular-tour-of-heroes-example

Check out at this files : app-routing-module, app-module and at the html (app for router-outlet) and hero detail for params usages.

In your case you can use a router-outlet, have a button with a (click) event and redirect your user using something like <a *ngIf="formOk" [routerLink]="/link">Link text</a>

Upvotes: -1

DeborahK
DeborahK

Reputation: 60528

You need to separate your components differently.

The <router-outlet> defines where the routed component appears. So your code (as written) is routing to exactly where you are telling it to.

You need to instead add the <router-outlet> to a higher level component. Then initially route your first component to that router outlet. And when the user clicks submit, route your new component to that router outlet.

For example:

app.component.html

<router-outlet></router-outlet>

page1.component.html

<button mat-raised-button color="primary" 
        id="button" type="submit" 
        routerLink="/page2" routerLinkActive="active">
   Submit
</button>

page2.component.html

<h2>Hello Member</h2>

I have a complete routing example here:

https://github.com/DeborahK/MovieHunter-routing

Upvotes: 3

Related Questions