NgFor and component selectors doesn't works inside <router-outlet>

Question

I'm using angular cli and I experience some problems with <router-outlet>. When i try to use a component selector like <app-class> or even an *ngFor inside a <div> it doesn't works when those are in a component "called" by <router-outlet>. I hope someone knows why it doesn't works and how to make it works.

This is my 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 { NavbarComponent } from './navbar/navbar.component';
import { StudentComponent } from './student/student.component';
import { RouterModule } from '@angular/router';
import {Routes} from '@angular/router';
import { HomeComponent } from './home/home.component';
import { TeacherComponent } from './teacher/teacher.component';
import { MyClassesComponent } from './my-classes/my-classes.component';

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'student', component: StudentComponent},
  {path: 'home', component: HomeComponent},
  {path: 'teacher', component: TeacherComponent, children: [
        { path: 'myclasses', component: MyClassesComponent},
        { path: '', component: MyClassesComponent}
    ] 
   }
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    StudentComponent,
    HomeComponent,
    TeacherComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

My teacher.component.html :

<div class="container-fluid">
    <h1 class="text-center">Jhon Doe</h1>
    <hr>
    <router-outlet></router-outlet>
</div>

My my-classes-compenent.html :

<h1 class="text-center display-1">My Classes</h1>
<div *ngFor="let number of [0,1,2,3,4,5]">
    <hr class="w-20">
    <div class="row justify-content-center">
        <div class="col-4 align-center">
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="width: 100%;">
                <h2>Ma classe n°</h2>
            </a>
            <ul class="list-group list-group-flush collapse" id="collapseExample">
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
                <li class="list-group-item">Jhon Doe</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

To be able to see the actual component you've put in a route config, you have to add it to the declarations of the corresponding NgModule :)

@NgModule({
  declarations: [
    MyClassesComponent,
    // ...
  ],
  // ...
})