title: Using routerlink and router-outlet in different components
body: <p>I have two components A and B. Now i am using both these in another component C. Now what i want to do is I have the routerLink setup in component A and have setup router-outlet setup in B. So I want to have a couple of links in component A clicking which will change the component to be loaded in B.
  I tried this but its not working that way. But when i put both the routerLink and router-outlet in B only it works.
  Any code example to do it ??</p>
  <p>Component A :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxLayout="column" fxLayoutAlign="space-between center" class="side-nav-container"&gt;
    &lt;div fxLayout="column" fxLayoutAlign="space-between center"&gt;
      &lt;div style="width: 80%; border-bottom: 1px solid #696464" fxLayout="column" fxLayoutAlign="space-around center"&gt;
        &lt;img style="border-radius: 50%" src="../../../assets/images/MyImage.jpg" class="logo"&gt;
        &lt;p&gt;Welcome&lt;/p&gt;
        &lt;h3&gt;{{userName}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="button-div" fxLayout="column" fxLayoutAlign="space-around center"&gt;
        &lt;button mat-button [ngClass]="{'inactive' : homeToggle, 'active': !homeToggle}" (click)="homeHighlightToggle()"&gt;
          &lt;em class="fa fa-home font"&gt;&lt;/em&gt;
          &lt;span class="font-style"&gt;Home&lt;a routerLink="/userHome"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button mat-button [ngClass]="{'inactive' : profileToggle, 'active': !profileToggle}" (click)="profileHighlightToggle()"&gt;
          &lt;em class="fa fa-user font"&gt;&lt;/em&gt;
          &lt;span class="font-style"&gt;User Profile&lt;/span&gt;
        &lt;/button&gt;
        &lt;button mat-button [ngClass]="{'inactive' : notificationToggle, 'active': !notificationToggle, 'inactive-notification' : (notificationToggle &amp;&amp; notification)}" (click)="notificationHighlightToggle()"&gt;
          &lt;em class="fa fa-bell font"&gt;&lt;/em&gt;
          &lt;span class="font-style"&gt;{{notificationsTitle}}&lt;a routerLink="/userNotifications"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button mat-button [ngClass]="{'inactive' : historyToggle, 'active': !historyToggle}" (click)="historyHighlightToggle()"&gt;
          &lt;em class="fa fa-history font"&gt;&lt;/em&gt;
          &lt;span class="font-style"&gt;Case History&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="height: 300px; padding-bottom: 15px" fxLayout="column" fxLayoutAlign="end center" &gt;
      &lt;button mat-button class="inactive"&gt;
        &lt;em class="fa fa-power-off font"&gt;&lt;/em&gt;
        &lt;span class="font-style"&gt; Logout&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Component B:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div fxLayout="row" fxLayoutAlign="center stretch"&gt;
    &lt;app-side-nav&gt;&lt;/app-side-nav&gt;
    &lt;a routerLink="/userHome"&gt;Home&lt;/a&gt;
    &lt;a routerLink="/userNotifications"&gt;Notifications&lt;/a&gt;
    &lt;div class="main-body"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And the app-routing.module.ts :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import {RouterModule, Routes} from '@angular/router';
  
  import {UserHomeMainBodyComponent} from './components/user-home-main-body/user-home-main-body.component';
  import {UserNotificationsBodyComponent} from './components/user-notifications-body/user-notifications-body.component';
  
  
  const routes: Routes = [
    { path: 'userHome', component: UserHomeMainBodyComponent},
    {path: 'userNotifications', component: UserNotificationsBodyComponent}
  ];
  
  @NgModule({
    declarations: [],
    imports: [
      CommonModule,
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }</code></pre>
  </div>
  </div>
  </p>