courses-list.component.html

<div class="courses-list">
  <mat-card *ngFor="let course of courses$ | async">
    <mat-card-title>
      {{course.title}}
    </mat-card-title>
    <mat-card-content>
      {{course.desc}}

      <div>
        Fecha de Publicación {{course?.publicationDate | date:'short'}}
      </div>

      <div *ngFor="let m of course.modules">
        <p> {{m.title}}</p>
        <p> {{m.desc}} </p>

        <div *ngFor="let theme of m.themes">
          <p>{{theme.title}}</p>
        </div>
      </div>
    </mat-card-content>
    <mat-card-footer>
      <button (click)="showDetails(course.id)" mat-icon-button aria-label="Example icon-button with a heart icon">
        <mat-icon>visibility</mat-icon>
      </button>
    </mat-card-footer>
  </mat-card>
</div>