CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

Angular routing problem: new page showing below old page

I am trying to navigate to a new page in my angular app however. The new page which I created is showing below my home page which is app.component.ts

Here is my routing

const routes: Routes = [
  { path: '', redirectTo: 'billing-cycle', pathMatch: 'full' },
  { path: 'billing-cycle', component:  AppComponent},
  { path: 'customer-account-docs', component: CustomerAccountDocsComponent }
];

Here is my routerLink

 <a routerLink='/customer-account-docs'>{{msgFound.value}}</a>

Upvotes: 6

Views: 5883

Answers (2)

bubingaa
bubingaa

Reputation: 71

-- If you are new to Angular make sure your app.component.html only contain something like this

<app-header></app-header> // this should contain you custom header component
<router-outlet></router-outlet>
<app-footer></app-footer>// this should contain you custom footer component

-- Also make sure you got your homepage component separately and do not use the app.component.html as your homePage as it serves for your routing.

-- The app.component.html should only contain the code above.

-- Your components can then just have your static html contents.

-- You can then use the routerLink="/securelogin" in your HTML and make sure what you parse in the routerLink is something you configured in the app-routing.module.ts file e.g

{path: 'securelogin', component: SecureloginComponent},
  {path: 'secureregistration', component: SecureregistrationComponent},
  {path: 'forgottenpassword', component: ForgottenpasswordComponent}

-- Once you click on the button that contains the routerLink, Angular will look for that component that is mapped to the Path. In the example above securelogin is my path and the component mapped to that path is SecureloginComponentwhich is mapped to the securelogin HTML page and it will then inject the HTML into the <router-outlet></router-outlet> dynamically.

-- If you got another button that got the routerLink="/forgottenpassword" once you click on the button/link, Angular will look for the component mapped to that path. In the example above forgottenpassword is my path and the component mapped to that path is ForgottenpasswordComponent which is mapped to the forgottenpassword HTML page and it will then inject the HTML into the <router-outlet></router-outlet> dynamically.

Note: If you follow those steps above you will have your pages displayed independently without displaying them on the same browser page.

Upvotes: 4

TheParam
TheParam

Reputation: 10541

This is happening because you have added your code might like below

app.component.html 

<div>

.....<!-- Your other HTML code -->

</div>

<router-outlet></router-outlet> <!-- Your new page loaded here -->

so here when you loading the page that page loaded where your router-outlet tag defined

so my suggestion would be, do not add your other code in where router-outlet place.

Hope this will help!

Upvotes: 1

Related Questions