CODEWITHSUNDEEP
angularangular2-routing
Samriddha
Samriddha

Reputation: 33

When I am clicking on the button, my content is appearing on the same page in my Angular 2 application

app is my main component or root component. Inside app folder, I have 3 more components called school, teacher and student. Now on the home page I have 3 buttons: one for school, one for teacher and one for student. When I am clicking on any one of the buttons, the new content which I want to display on a new page is being displayed on the same page just below the buttons.

<div>
  <a routerLink="/school" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b1">SCHOOL REGISTRATION</button></a><br>
<br>
  <a routerLink="/teacher" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b2">TEACHER REGISTRATION</button></a><br><br><br>
  <a routerLink="/student" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b3">STUDENT REGISTRATION</button></a><br><br><br>
</div>
<router-outlet></router-outlet>

When I am keeping the router-outlet tags the content is being displayed on the same page. But if I remove them, nothing is displayed, even though the URL shows /school if I click on the school button.

I want to click on the button and display the new content on a new page.

Or, is there any way where I can hide out the old content and show just the new content when a button is clicked?

Any kind of help would be appreciated. Thanks.

Upvotes: 0

Views: 1710

Answers (2)

machinehead115
machinehead115

Reputation: 1657

You can put the navigation in another component and add that component and the others as children of you main component and just have the path of the parent and the navigation components as '':

Plnkr Example

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: MenuComponent
      },
      {
        path: 'school',
        component: SchoolComponent
      },
      {
        path: 'teacher',
        component: TeacherComponent
      },
      {
        path: 'student',
        component: StudentComponent
      }
    ]
  }
];

Upvotes: 0

Steve Land
Steve Land

Reputation: 4862

Create another component called something like MenuComponent, add your buttons to that component and set that as your default route.

Then it will be the first page shown when your app loads, and will be replaced by the other components when the user clicks a button.

This will also allow you to show the menu again, if you need to, by just navigating back to the root.

Upvotes: 1

Related Questions