Angular 7 Router appears the page I want but does not remove the previous page and is both at the same time

Question

I set my files all correctly I think, but when I click on the button

This is the router configuration page I put the signup in the array

app-route.module.ts

   import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupComponent } from './signup/signup.component';


const routes: Routes = [
  {path: 'signup', component: SignupComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the navbar I used to call the signup route

Nav.component.html

<div class="wrapper header" id="home">
  <nav>
    <div class="menu-icon">
      <i class="fa fa-bars fa-2x"></i>
    </div>
    <div class="logo">
      <a class="scroll" href="#home">SHOP</a>
    </div>
    <div class="menu">
      <ul>
        <li><a class="scroll" href="#guitars">Guitars</a></li>
        <li><a class="scroll" href="#contact">About</a></li>
        <li><a class="scroll" routerLink="/signup" routerLinkActive="active">SignUp</a></li>
      </ul>
    </div>
  </nav>

  <h3 class="h3style">A guitarra do seus sonhos <br> está aqui</h3>

</div>

And this is my page I use to call the selectors

<app-nav></app-nav>
<app-products></app-products>
<app-subscribe></app-subscribe>
<app-contact></app-contact>
<app-footer></app-footer>

<router-outlet></router-outlet>

Only thing that happens when I click the signup on the navbar is to add the page I want below the page I want to leave when I click the signup someone knows what I have to do ?

Answer 1

As Victor Henrique said, the only page you have set to be triggered by a route is the signup page. All other components are fixed on the main page.

To fix this, you have to create routes to the other pages you want when you click on a link. For example, you could do the following:

Create a Homecomponent, Navcomponent (containing ONLY the <Nav> element), Shopcomponent, Guitarscomponent, Aboutcomponent and Signupcomponent.

Example of Appcomponent:

<app-nav></app-nav>
<router-outlet></router-outlet>
<footer>
  <!-- Se o footer possuir muito conteúdo, você pode criar um component pra ele e substituir esse elemento pelo seletor do componente -->
</footer>

The Homecomponent must have the HTML that will be loaded as soon as the user accesses your site without a specific route (type 'www.seusite.com.br/').

This way you have elements that will ALWAYS be visible on the page, which is the Nav and the footer. Angular will insert a different component after the element <router-outlet> depending on the route you are on. Then you will have to set the route this way:

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent }, // Caso a rota seja 'www.seusite.com.br/'
  { path: 'About', component: AboutComponent }, // Caso a rota seja 'www.seusite.com.br/About'
  { path: 'Shop', component: ShopComponent }, // Caso a rota seja 'www.seusite.com.br/Shop'
  { path: 'Guitars', component: GuitarsComponent }, // Caso a rota seja 'www.seusite.com.br/Guitars'
  { path: 'Signup', component: SignupComponent } // Caso a rota seja 'www.seusite.com.br/signup'
];

If you are on the Guitars page and click Signup, the content of the Guitars component will be replaced by the content of the Signup page.

This is just one example. The reality of your site may be quite different.