How to include content in ng-content angular 6

I recently learn about Angular, now I'm trying to create a menu system in angular 6. here is my folder structure

My app.module.ts

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 {}

So the first user will log in then after login user will go to layout-component.

Here is my layout.component.ts

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() {}
}

and here is my layout.component.html

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

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 clicked component inside my layout.component.html

<div class="navbar-nav">
  <a class="nav-item nav-link active" 
    routerLink="/adminpanel/dashboard" 
    routerLinkActive="active">
    Dashboard
  </a>
  <a class="nav-item nav-link" 
    routerLink="/adminpanel/profil" 
    routerLinkActive="active">
    Profil
  </a>
</div>

What you're trying to do here is load a Component based on routes. For that router-outlet is used. ng-content is used for rendering the projected content in a component.

Use router-outlet instead of ng-content

Change this:

<app-header></app-header>
<div class="container">
  <ng-content></ng-content>
</div>
<app-footer></app-footer>

To this:

<app-header></app-header>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

There's also an issue with your route config and should be changed like this:

const appRoutes: Routes = [
  {
    path: "login",
    component: LoginformComponent,
    data: {
      animation: 'login'
    }
  },
  {
    path: "register",
    component: RegisterformComponent,
    data: {
      animation: 'register'
    }
  },
  {
    path: "adminpanel",
    component: LayoutComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'profil',
        component: ProfilComponent
      },
      {
        path: '',
        redirectTo: '/adminpanel/dashboard',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: '/login',
    pathMatch: 'full'
  }
];