How To dynamically generate an HTML Table using ngFor. in Angular

One possible way to make it work without changing the data structure.

First some Interfaces:

interface Activity {
  id: number;
  activity: string;
  subject: string;
  icon: string;
}

interface Attempt {
  grade: number;
  note: string;
}

interface ActivityAttemp {
  activityName: string;
  attempts: Attempt[];
}

interface ActivitiesBySubject {
  subject: string;
  activities: ActivityAttemp[];
}

Calculate Attempts count from data.activities:

attemptCounts: number[] = [];

const count =
  ((Object.values(this.data.activities)[0] as string[]).length - 1) / 2;
for (let i = 1; i <= count; ++i) {
  this.attemptCounts.push(i);
}

Before giving data to Angular to render it some pre-processing:

this.subjects.forEach((subject: string) => {
  this.activitiesBySubject.push({
    subject,
    activities: this.activities
      .filter((act: Activity) => act.subject === subject)
      .map((act: Activity) => {
        return {
          activityName: act.activity,
          attempts: this.getAttemptsForActivity(act.activity)
        };
      })
  });
});

The idea is to have all needed data in one place this way HTML template becomes much simpler:

<div style="overflow: auto">
  <table>
    <caption>Session Summary</caption>
    <tr>
      <th style="width: 40%"></th>
      <th style="width: auto"></th>
      <th style="width: auto" colspan="2" *ngFor="let attempt of attemptCounts">Attempt {{attempt}}</th>
    </tr>

    <tr>
      <th style="width: 40%">Subject Grouping</th>
      <th style="width: auto">Activity</th>

      <ng-container *ngFor="let attemptLabel of attemptCounts">
        <th style="width: auto">Grade</th>
        <th style="width: auto">Note</th>
      </ng-container>
    </tr>


    <ng-container *ngFor="let actsBySubj of activitiesBySubject">

      <tr>
        <td [attr.rowspan]="actsBySubj.activities.length + 1">
          {{ actsBySubj.subject }}
        </td>
      </tr>

      <tr *ngFor="let activity of actsBySubj.activities">
        <td>
          {{ activity.activityName }}
        </td>

        <ng-container *ngFor="let attempt of activity.attempts">

          <td>
            {{attempt.grade}}
          </td>
          <td>
            {{attempt.note}}
          </td>

        </ng-container>

      </tr>

    </ng-container>

  </table>
</div>

Working Stackblitz

Thanks @GaurangDhorda for initial Stackblitz.

UPDATE

To work with dropdown the processing has to be moved to a separate method:

  private calcTableData() {
    // reset
    this.attemptCounts = [];
    this.activitiesBySubject = [];

    // find exercise from "selectedExerciseId"
    const selectedExercise = this.data.find(
      (x: any) => x.id === this.selectedExerciseId
    );

    if (!selectedExercise) {
      return; // unable to find exercise
    }

    // calc attempt count eg.: 1, 2, 3
    for (let i = 1; i <= selectedExercise.attemptCount; ++i) {
      this.attemptCounts.push(i);
    }

    this.subjects.forEach((subject: string) => {
      this.activitiesBySubject.push({
        subject,
        activities: this.activities
          .filter((act: Activity) => act.subject === subject)
          .map((act: Activity) => {
            return {
              activityName: act.activity,
              attempts: this.getAttemptsForActivity(
                selectedExercise,
                act.activity
              )
            };
          })
      });
    });

    console.log(this.activitiesBySubject);
  }

This method uses a member variable selectedExerciseId to get the selected item. Also the color palette is moved to:

  colors: { [key: string]: string } = {
    Control: '#bfbfbf',
    AFCS: '#fac090',
    'Situational Awareness': '#c4bd97',
    'Leadership / Teamwork': '#d99694',
    Communication: '#c3d69b',
    'PB. Solving / Decision Making': '#b3a2c7'
  };

Event handler onChange and life cycle hook ngOnit just calls calcTableData:

  ngOnInit(): void {
    this.calcTableData();
  }

  onChange(e: Event) {
    this.calcTableData();
  }

Updated Stackblitz