Create a calendar - Leave empty space when the month doesn't start from Sunday (Angular)

Question

I'm using Angular and I'm trying to display a list of days within a list of months. But I have a problem when the day of the month it doesn't start from sunday. For example: if the month starts from wednesday it will populate till saturday but the next sunday instead of starting in a new row, it starts in the previous row and then continues in the next row starting from wednesday again.

Here you can see how it looks like now:

here's the code:

<div class="clr-row">
  <div class="clr-col-1" *ngFor="let listOfDay of listOfDays; let b = index">
    <p>{{ listOfDay }}</p>
    <div *ngFor="let dailyGoal of dailyGoals">
      <div
        *ngIf="
            dailyGoal.date.getMonth() === i + startDate.getMonth() &&
              startDate.getMonth() < 12 &&
              startDate.getFullYear() ===
                dailyGoal.date.getFullYear() &&
              dailyGoal.date.getDay() === b;
            else checkIfNextYear
          "
      >
        {{ dailyGoal.date | date: "E, d/M/yy" }}
      </div>
      <ng-template #checkIfNextYear>
        <div
          *ngIf="
              dailyGoal.date.getMonth() ===
                i + startDate.getMonth() - 12 &&
              endDate.getFullYear() ===
                dailyGoal.date.getFullYear() &&
              dailyGoal.date.getDay() === b
            "
        >
          {{ dailyGoal.date | date: "E, d/M/yy" }}
        </div>
      </ng-template>
    </div>
  </div>
</div>

Here is how I would like to display it: