CODEWITHSUNDEEP
angular
Sugumar BG
Sugumar BG

Reputation: 13

Angular Routing duplicating same content twice and when click button Routing content alone should show

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

So the same content is repeating twice and onclick of New Admin button routing is happening to newadmin html page but because of duplicate there showing New Admin content as well as practice component content also.

Duplicate should not happen and onclick of New Admin button show only new admin content alone.

Upvotes: 0

Views: 3343

Answers (1)

SomeStudent
SomeStudent

Reputation: 3048

Issue here is two fold:

A) your app component also has a component it is loading. The app component is the wrapper around your entire application. So anything in the app component will display. That is why it looks like it is duplicating. So remove the call to your practice component.

B) Wrong usage of your router. You have two blank paths leading to two separate components. Think about it, how would you know where togo if you have two blank routes? Remove the line that also calls AppComponent, app component is always loaded as I mentioned in point A.

Working stackblitz: https://stackblitz.com/edit/angular-ogmfj5?file=src/app/app.module.ts

In essence though, your app component html should look like this:

<router-outlet> </router-outlet>

And your app.module.ts should look like this:

const routes: Routes = [
  { path: '', component: PracticeComponent, pathMatch: 'full' },
  { path: 'newadmin', component: NewAdmin },
];
@NgModule({
  imports: [RouterModule.forRoot(routes), BrowserModule, FormsModule],
  declarations: [AppComponent, PracticeComponent, NewAdmin],
  exports: [RouterModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Of course change the corresponding components to match the ones you have.

Upvotes: 2

Related Questions