title: nav bar is not being showed in html
body: <p>I am beginner in angular.<br />
  I have three component file 1. value component 2. nav component. 3. app.component. I need to bring menu bar using the selector: 'app-value'. the value html is being showed without the menu. How can i show the menu from nav.component.html. My github code <a href="https://github.com/ppp3pol/datingapp.git" rel="nofollow noreferrer">https://github.com/ppp3pol/datingapp.git</a></p>
  <p>nav.component.html code</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;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
              &lt;form class="navbar-form navbar-right"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" placeholder="Email" class="form-control"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="password" placeholder="Password" class="form-control"&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-success"&gt;Sign in&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;!--/.navbar-collapse --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>nav.component.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 { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.css']
  })
  export class NavComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }</code></pre>
  </div>
  </div>
  
  value.component.html code</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 { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-value',
    templateUrl: './value.component.html',
    styleUrls: ['./value.component.css']
  })
  export class ValueComponent implements OnInit {
    values: any;
  
    constructor(private http: HttpClient) { }
  
    ngOnInit() {
      this.getValues();
    }
  
    getValues() {
      this.http.get('http://localhost:8000/api/values').subscribe( response =&gt; {
        this.values = response;
      }, error =&gt; {
        console.log(error);
      })
  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p *ngFor="let value of values"&gt;
      {{ value.id}}, {{value.name}}  
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>app.component code html and ts code</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 { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'BookApp-SPA';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;app-nav&gt;&lt;/app-nav&gt;
  
  &lt;h1&gt;
      Myapp App
  &lt;/h1&gt;
  &lt;app-value&gt;&lt;/app-value&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>finally my app.module</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 { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  import { ValueComponent } from './value/value.component';
  import { NavComponent } from './nav/nav.component';
  
  @NgModule({
     declarations: [
        AppComponent,
        ValueComponent,
        NavComponent
     ],
     imports: [
        BrowserModule,
        HttpClientModule
     ],
     providers: [],
     bootstrap: [
        AppComponent
     ]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>