title: Navigation to another page keeping the nav bar visible
body: <p>I am researching about the feature which let us to change the page in an angular2 project.</p>
  
  <p>I got to route different components in the same page by demand. But I want now, to create an hyperlink which redirect me to <strong>another page</strong>. I can´t figure it out...</p>
  
  <p>Honestly, I am completely lost. I can´t almost find information about it.</p>
  
  <p>My best approaches were (shame on me) trying to use button instead of hiperlink html tag:</p>
  
  <p><strong>my_component.ts</strong></p>
  
  <pre><code>&lt;button (click)="redirect()"&gt;Socios del VideoClub&lt;/button&gt;
  ....
  Export class myComponent{
  
      constructor(
       private route: ActivatedRoute,
       private router: Router
      ) {}
  
      redirect(){
          this.router.navigate(['/socios']);
      }
  </code></pre>
  
  <p>I defined <em>'/socios'</em> in my <strong>app.routing.ts</strong>.
  I tried with <em>navigationByUrl</em>, as well. </p>
  
  <p>Both of them, just do the same, render it in the same page.</p>
  
  <p><strong>Note</strong>: I want to redirect by component (I´m injecting in the component), so I can´t use <strong>window.location.href</strong></p>
  
  <p>Thanks mates</p>
  
  <p><strong><em>[EDITED]</em></strong></p>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>// Importar componentes y módulos para el routing 
  import { Routes, RouterModule } from '@angular/router';
  
  // Componentes
  import { SociosComponent } from './socios.component';
  
  // Configuración de las rutas
  const appRoutes: Routes = [
    { path: 'socios', component: SociosComponent }
  ];
  
  export const appRoutingProviders: any[] = [
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>Note2</strong>: I coded an index. It is a bootstrap carousel fullscreen.</p>
  
  <p>The caption for each image, will be a link to another page.</p>
  
  <p>I want to use angular´s routing for going to these different pages.</p>
  
  <p>I achieved to render a component from the same page which is called it.</p>
  
  <p>I can render, using just html hypelink tag, another static page.</p>
  
  <p>But my problem is when I want to render another page using angular. I want to do it, because I am injecting the model, coming from a service, in this component...</p>
  
  <p><strong>Note3</strong>: Well, finally, I did a plunker. My first time doing it so I hope all is correct. If not, please, let me know what you all need and I Will change it. Thanks again :):)</p>
  
  <p><a href="https://plnkr.co/edit/FGPEwcKD4gKQn5RIJphF?p=catalogue" rel="nofollow noreferrer">Demo plunker</a></p>