title: Angular 8 - Displaying components inside of other components
body: <p><strong>Problem:</strong></p>
  
  <p>To display (custom) Navigation component (<em>titled topnav</em>) in <em>app.component.html</em></p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>   import { TopnavComponent } from './topnav/topnav.component';
  
     @NgModule({
           declarations: [
              AppComponent,
              TopnavComponent,
           ]
      })
  </code></pre>
  
  <p>*edited to show AppComponent inside of declarations</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code> &lt;topnav&gt;&lt;/topnav&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>SOLUTION</strong></p>
  
  <pre><code>&lt;app-topnav&gt;&lt;/app-topnav&gt;
  </code></pre>
  </blockquote>
  
  <p><strong>topnav.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-topnav',
    templateUrl: './topnav.component.html',
    styleUrls: ['./topnav.component.css']
  })
  export class TopnavComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>*edited to show topnav.component.ts</p>
  
  <p>Not sure what I am missing here.  I attempted to try different directives, importing and exporting in different ways.  I know this is a basic idea behind Angular but having trouble and has been documented with Angular 2 but their solutions were not resolving in Angular 8.</p>
  
  <p>Still getting this error:</p>
  
  <pre><code>1. If 'topnav' is an Angular component, then verify that it is part of this module.
  2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    &lt;div class="container"&gt;
  
     [ERROR -&gt;]&lt;topnav&gt;&lt;/topnav&gt;
  
    &lt;/div&gt;
  "): ng:///AppModule/AppComponent.html@4:3
  </code></pre>
  
  <p>When adding to imports:[] in app.module.ts, from my understanding only takes modules based on the error I was getting.</p>