title: Angular Routing: Replacing components
body: <p>I am doing a project for my own learning and stuck on this simple problem.
  I have first/main page as login/register page. Now I want to replace page with other component using routing. As I click register I want to see only register-form component. I have module ENTRY with its own entry.routing, there are three components login component, register component and register-form component. On first page I am viewing login and register components, their directives are in app component's html to view them. How do I change form app.component to register-form.component in view?</p>
  
  <p>Here is some of my code:</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div class="flex-row"&gt;
  &lt;div class="flex-grow-one logo"&gt;
      &lt;h1&gt;Something&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="flex-column flex-grow-one entry-section"&gt;
      &lt;app-login&gt;&lt;/app-login&gt;
      &lt;div class="separation"&gt;&lt;/div&gt;
      &lt;app-register&gt;&lt;/app-register&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  import { EntryModule } from './modules/entry/entry.module';
  import { HeaderComponent } from './shared/components/header/header.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      HttpClientModule,
      EntryModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>entry.routing.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { RegisterFormComponent } from './components/register-form/register-form.component';
  
  const entryRoutes: Routes = [
    { path: 'register-form', component: RegisterFormComponent }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(
        entryRoutes
      )
    ],
    exports: [
      RouterModule
    ]
  })
  
  export class EntryRouting {}
  export const EntryRoutingComponents = [
    RegisterFormComponent
  ];
  </code></pre>
  
  <p>register.component.html</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;div class="card-title"&gt;
      &lt;h2&gt;REGISTER&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="card-content"&gt;
      &lt;div class="card-form"&gt;
        &lt;div class="card-input"&gt;
          &lt;input type="Email" name="Email" placeholder="Email"/&gt;
        &lt;/div&gt;
        &lt;div class="card-input"&gt;
          &lt;input type="password" name="password" placeholder="Password"/&gt;
        &lt;/div&gt;
        &lt;div class="card-actions"&gt;
          &lt;button routerLink="/register-form" class="button-register"&gt;Register&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know there must be a router-outlet, but I don't really know where to put it, because if I put it inside register.component.html, it shows register-form component on the same view, where the router-outlet is.</p>