How do I clear the previous page when navigating to a new page?

Question

I have been working on an angular project for several months and while I have the basic functionality down, when I click a link to go to a new page on the site, the homepage doesn't get cleared and disappear when the new page loads:

Before

After

This happens across every page I have. I've looked up using RouterLinks for Angular, tried window.location.href in javascript, and nothing seems to work. I can provide code snippets as needed. Navbar:

<nav id='navbar'>
      <div class='searchbar'>
        <form action='/action_page.php'>
          <input type='text' id='searchInput' placeholder='Search the app...'>
          <ul id='searchList' style='display: none;'>
            <li><a href='/account'>account</a></li>
            <li><a href='/collection'>collect</a></li>
            <li><a href='/messaging'>messages</a></li>
            <li><a href='/bill'>bill</a></li>
            <li><a href='/notfound'></a></li>
          </ul>
          <button id='submit' onclick="searchFunction()" type='submitbtn'>Submit</button>
        </form>
      </div>

      <div id='home'>
          <button class ='home' type='button'><a routerLink='' onClick="navigate()">Homepage</a></button>
      </div>
  
      <div id='collect-cash'>
          <button class ='collect'><a routerLink='/collection' onClick="navigate()">Collect Cash</a></button>
          <!--this button must go to a page that shows an amount that the app can collect. 
          -->
      </div>
  
      <div id='shareacct'>
          <button class ='account' type='button'><a routerLink='/account' onClick="navigate()">Share Account/Add Users</a></button>
          <!--this button brings up a menu that specifies which users to add-->
      </div>
  
      <div id='splitbill'>
          <button class ='bill' type='button'> <a routerLink='/bill' onClick="navigate()">Split Bill</a></button>
          <!--this button brings up a page that asks users to split the bill-->
      </div>
    </nav>

Javascript:

navigate()
        {
          window.location.href="";
     }

Answer 1

By doing navigate() {}, you are trying to call navigate. To actually define a function you have to say you are defining a function.

Below is some code you can work off of:

 function navigate() { window.location.href=""; }

 <a onclick="navigate()"><button>hide page</button></a>

Another way you could reset your page, though, is if you actually delete or hide all code from the page:

 function removePage() { document.body.innerHTML = ""; } function hidePage() { document.body.style.display = "none"; }

 <h1>Demo to delete/hide the page</h1> <a onclick="removePage();"><button>delete the page</button</a> <a onclick="hidePage();"><button>hide the page</button></a> <,-- text to show the full extent of what happens --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Praesent odio turpis, accumsan at egestas sed. maximus id arcu, Aenean quis ante dictum, volutpat dolor sed. lobortis mi. Suspendisse ac felis justo. Nullam lacinia dictum accumsan, In nec justo lobortis, porta diam scelerisque. bibendum magna. Mauris ac luctus justo. Nam varius bibendum ex. Suspendisse potenti.</p> <p>Praesent ac egestas mauris, Nunc dolor tellus, porta id neque non. scelerisque tempor neque, Nulla vehicula dolor diam. vitae venenatis lacus ullamcorper nec, Maecenas pretium quam ac nibh efficitur. placerat varius enim accumsan, Vivamus elementum sapien ac nisl cursus. vitae hendrerit sapien fringilla. Donec tempus fringilla mattis. Mauris mollis consequat tincidunt. Sed non rutrum erat. Nunc posuere vitae nunc non vestibulum, Nam facilisis, nunc ac molestie consequat, ligula nisl ullamcorper ante. ac eleifend nulla neque sollicitudin eros. Nulla tristique nulla quis pellentesque efficitur, Sed commodo ultricies sapien. ac feugiat ligula dictum eget.</p>

Answer 2

Your best bet will be to use Angular's router for simple navigation within the angular app.

Your usage of the routerLink in the template seems correct. when you are using Angular's built-in router:

• You should remove this "navigation" function, and the onclick call to it
• You should not use window.location.href (as it causes the app to reload)
• you need to router outlet to your base routing component template

<router-outlet></router-outlet>

create a AppRouterModule, with the routes to your components, and import it into your main AppModule.

const appRoutes: Routes = [
  { path: '', redirectTo: '/account', pathMatch: 'full' },

  { path: 'collection', component: CollectionComponent }, // <-- Make sure these match your components
  { path: 'account', component: AccountComponent },
  { path: 'bill', component: BillComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  ...
})
export class AppRouterModule { }

in your AppModule

@NgModule({
  imports: [
    ...
    AppRouterModule
  ],
  ...
})
export class AppModule { }

and in your template:

<nav id='navbar'>
 ...
</nav>
<router-outlet></router-outlet>

hopefully this gets you started.