<div [id]="coursesLists[courseListName].name" class="capability-transformation-slider" *ngFor="let courseListName of courseListNames">
  <ng-container *ngIf="coursesLists[courseListName].courses.length > 0">
    <header>
      <h2>{{ coursesLists[courseListName].name }} <span>({{coursesLists[courseListName].courses.length}})</span></h2>
      <mat-icon>more_horiz</mat-icon>
    </header>
    <app-slider [valueStep]='300'>
      <app-employee-course-card [course]="course" [type]="coursesLists[courseListName].type" [role]="role"  (gotoAssessment) = "gotoAssessmentEvent($event)" (updateCourseEvent)="updateCourse($event, course, coursesLists[courseListName].type, courseListName)" *ngFor="let course of coursesLists[courseListName].courses"></app-employee-course-card>
    </app-slider>
  </ng-container>
</div>
