Which architecture for a an Angular side menu?

I'm trying to make a side menu for an Angular project. I retrieve data from firebase but I do not know if my architecture is correct.

I have make a component with the selector app-serie-list:

<li routerLinkActive="active" *ngFor="let serie of series; let i = index">
      <a routerLink="series/view/{{i}}">{{serie.title}}-{{i}}</a>
</li>

and I have integrated to the app.component.html like this :

<app-header></app-header>
<div class="row">
  <div class="col-sm-2">
    <app-serie-list></app-serie-list>
  </div>
  <div class="col-sm-10">
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

At this time I don't know if my app-serie-list component is at the right place. Must do I put it in the component which take place in the router-outlet ?

And when the app-serie-list component is displayed, it changes the url of my web browser but it not change the router-outled displayed.

So as Xesenix say my architecture is good. My mistake is on the SingleSerieComponent, the component that is displayed by the routerlink.

I have subscribed to the code which is in the ngOnInit method. So my SingleSerieComponent look like :

@Component({
  selector: 'app-single-serie',
  templateUrl: './single-serie.component.html',
  styleUrls: ['./single-serie.component.scss']
})
export class SingleSerieComponent implements OnInit {

  serie: Serie;
  series: Serie[];
  serieSubscription: Subscription;

  constructor(private route: ActivatedRoute, private serieService: SeriesService,
              private router: Router) { 

    route.params.subscribe(val => {
      this.serie = new Serie(''); // on definit par defaut : chaine vide, 0 et chaine vide
      const id = this.route.snapshot.params['id'];
      console.log("id :");
      console.log(id);
      this.serieService.getSingleSerie(+id).then(
        (serie: Serie) => {
          this.serie = serie;
        }
      );
    });
  }

  ngOnInit() {
    console.log("SingleSerieComponent-ngOnInit");

    this.serie = new Serie(''); // on definit par defaut : chaine vide, 0 et chaine vide
    const id = this.route.snapshot.params['id'];
    console.log("id :");
    console.log(id);
    this.serieService.getSingleSerie(+id).then(
      (serie: Serie) => {
        this.serie = serie;
      }
    );

  }

  onBack(){
    this.router.navigate(['/pops']);
  }

  ngOnDestroy(){
    console.log("SingleSerieComponent-ngOnDestroy");
  }
}