Angular routing between views

Question

I have created a login page using Angular 7. I have created how the login page looks in the initial app.component.html file and I implemented the logic at app.component.ts file.

I also put a link "Forgot password". I put a router link redirecting to the forgot-password.component.html. The url changes correctly (from localhost:4200 to localhost:4200/forgot-password) but the forgot-password.component.html is drawn on top of the previous login page.

http://prntscr.com/malk00

How can I erase the login page and go to the forgot password page?

I think best way to do this create login and forgot password separate component. add <routeroutlet></routeroutlet> in your appComponent. can you create small https://stackblitz.com for your problem. — Abhishek
– Abhishek, Commented Jan 22, 2019 at 14:37

DeborahK · Accepted Answer · 2019-01-22 20:47:17Z

1

As suggested by @abhishek, build the login component as a separate component. Only put the router outlet in the app.component.html:

<router-outlet></router-outlet>

Then change your routing to this:

const routes: Routes = [
  { path: 'login', component: LoginComponent }
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'forgot-password', component: ForgotPasswordComponent }
];

That way the login page will route to the router outlet. And when the user clicks on the forgot password link, the entire page is replaced with the forgot-password component.

answered Jan 22, 2019 at 20:47

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dorinel Panaite · Accepted Answer · 2019-01-22 14:37:51Z

0

Having the router from import {Router} from '@angular/router';, you can do this to redirect to another page router.navigateByUrl('/forgot-password');. It will then load the forgot password page.

answered Jan 22, 2019 at 14:37

Dorinel Panaite

6021 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular routing between views

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related