Dynamic Menu Links Pointing to Component

Posted on by

I am using a simple two column layout for one of the sections of my site. The left column contains a menu that is dynamically generated and the right column is where I want the content from each link in the menu to populate when a user clicks on each link, but I am unsure what the actually [href] for each menu link should be to direct the content to the router-outlet, which is another component called LessonsComponent.

Here are the various components:

lessons-layout.component

<div class="row">
  <div class="col-3"><app-sidemenu></app-sidemenu></div> <!--left menu-->
  <div class="col"><router-outlet></router-outlet></div> <!--content goes here from LessonsComponent-->
</div>

sidemenu component html This is where the link is

<div class="container">
    <div class="row">
      <div class="col">
        <h2>Current Videos</h2>
            <div class="row" *ngFor="let videos of videos">
              <div class="col" >
                  <div><a [href]='videos.order'>{{ videos.title }}</a></div> <!--link is here 'videos.order'-->  
              </div>
            <!--end of row-->  
            </div>
        <!--end of col-->
        </div>
    <!--end of row-->
    </div>
<!-- /container -->
</div>

app-routing

    { 
      path: '', 
      component: LessonsLayoutComponent,
      children: [
        { path: 'lessons/:id', component: LessonsComponent },
      ]
    },

Lessons Component html

<p>lessons works!</p>

Source: Angular Questions