title: How to include content in ng-content angular 6
body: <p>I recently learn about Angular, now I'm trying to create a menu system in angular 6.  here is my folder structure</p>
  
  <p><a href="https://i.stack.imgur.com/QCXP8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QCXP8.png" alt="enter image description here"></a></p>
  
  <p>My app.module.ts</p>
  
  <pre><code>import { BrowserModule, } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { LoginformComponent } from './loginform/loginform.component';
  import { AppRoutingModule } from './app-routing.module';
  import { ReactiveFormsModule }    from '@angular/forms';
  import { FormsModule } from '@angular/forms';
  import { RegisterformComponent } from './registerform/registerform.component';
  import { HttpClientModule } from  '@angular/common/http';
  import { AlertModule } from 'ngx-alerts';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AuthGuard } from './auth.guard'
  import { RouterModule, Routes } from '@angular/router';
  import { UiModule } from './ui/ui.module';
  import { LayoutComponent } from './ui/layout/layout.component';
  import { HeaderComponent } from './ui/header/header.component';
  import { FooterComponent } from './ui/footer/footer.component';
  import { DashboardComponent } from './ui/dashboard/dashboard.component';
  import { ProfilComponent } from './ui/profil/profil.component';
  
  const appRoutes: Routes = [{
      path: "",
      redirectTo: 'login',
      pathMatch: 'full'
    },
    {
      path: "login",
      component: LoginformComponent,
      data: {
        animation: 'login'
      }
    },
    {
      path: "register",
      component: RegisterformComponent,
      data: {
        animation: 'register'
      }
    },
    {
      path: "adminpanel",
      component: LayoutComponent,
      children: [{
          path: '',
          redirectTo: 'dashboard',
          pathMatch: 'full'
        },
        {
          path: 'dashboard',
          component: DashboardComponent
        },
        {
          path: 'profil',
          component: ProfilComponent
        }
      ]
    }
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginformComponent,
      RegisterformComponent,
      LayoutComponent,
      HeaderComponent,
      FooterComponent,
      DashboardComponent,
      ProfilComponent
    ],
  
    imports: [
      RouterModule.forRoot(appRoutes),
      ReactiveFormsModule,
      BrowserModule,
      AppRoutingModule,
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AlertModule.forRoot({
        maxMessages: 1,
        timeout: 5000
      }),
      BrowserAnimationsModule,
  
    ],
    exports: [
      HeaderComponent,
      FooterComponent,
    ],
    providers: [AuthGuard],
    bootstrap: [AppComponent],
  
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>So the first user will log in then after login user will go to <code>layout-component</code>.</p>
  
  <p>Here is my layout.component.ts </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-layout',
    templateUrl: './layout.component.html',
    styleUrls: ['./layout.component.css']
  })
  export class LayoutComponent implements OnInit {
    constructor() {}
    ngOnInit() {}
  }
  </code></pre>
  
  <p>and here is my layout.component.html</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;div class="container"&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>There is no error with my script above. But my problem is when I click the link from header.component.ts I can't open the <code>clicked component</code>  inside my <code>layout.component.html</code></p>
  
  <pre><code>&lt;div class="navbar-nav"&gt;
    &lt;a class="nav-item nav-link active" 
      routerLink="/adminpanel/dashboard" 
      routerLinkActive="active"&gt;
      Dashboard
    &lt;/a&gt;
    &lt;a class="nav-item nav-link" 
      routerLink="/adminpanel/profil" 
      routerLinkActive="active"&gt;
      Profil
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>