Angular 7 Nested Components

Question

I'm a guy with experience in WPF. And now i decided to try web development

And someone that learn from experience and hands on instead of reading

I'm trying to create a simple web app.

Angular 7 that uses bootstrap 4

So i created a simple Angular App installed bootstrap 4 then copied the code of the dashboard.html with modification of this template https://www.creative-tim.com/product/material-dashboard i know that there is an Angular version for this template but i want to learn how things work.

I have successfully used the template in the angular app

Template Screenshot

But i want to separate the navigation of the template

So i added a component named nav and pasted the code in it

<li class="nav-item active  ">
            <a class="nav-link" href="./dashboard.html">
              <i class="material-icons">dashboard</i>
              <p>Dashboard</p>
            </a>
          </li>

Then this is the code for my app.component.html

<div class="sidebar-wrapper">
        <ul class="nav">
            <nav></nav>

        </ul>
      </div>

But the navigation is not showing in my Web this is what is look like now

Screenshot of the component that is not working

This is the code for app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What are the things that i missed?

If i need to post code from another file. Please let me know. Thank you.

Answer 1

Would need the full code for the nav component to be sure, but an educated guess would be that you need to use <app-nav></app-nav> instead. Check the selector property of your nav component