How to display month only one point while showing data in angular 13?

Question

I'm New To angular. In a Milestone section there is a year and month loop. In the month loop the month name should be displayed only once for the specific year. please help me to find the possible solution. My Html & Ts Codes are displayed below

HTML Code

<section class="milestone-wrapper">
    <section class="milestone-wrap-info">
        <ul class="timeline">
            <li *ngFor="let milestone of formattedMileStoneData">
                <div class="direction-r">
                    <div class="flag-wrapper">
                        <span class="flag">{{milestone.Year}}</span>
                    </div>
                    <div class="desc" *ngFor="let month of milestone.Month">
                        <label>{{month.MonthName}}</label>
                        <p>{{month.Details}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </section>
</section>

Here is my Data

"data": [
            {
                "Id": "42",
                "Year": "2021",
                "MonthName": "December",
                "Details": "Introduce Minimum Wage Allowance for government staff",
                "DisplayOrder": "3",
                "LanguageID": "1",
                "Hide": "0"
            },
            {
                "Id": "41",
                "Year": "2021",
                "MonthName": "December",
                "Details": "Complete the pay structure model used in the Pay Framework",
                "DisplayOrder": "2",
                "LanguageID": "1",
                "Hide": "0"
            },
            {
                "Id": "18",
                "Year": "2021",
                "MonthName": "October",
                "Details": "Formulate the Job Evaluation Guidelines",
                "DisplayOrder": "1",
                "LanguageID": "1",
                "Hide": "0"
            }];

Here is My Ts Code

this.formattedMileStoneData = this.allMileStones.reduce(
          (a: any, b: any) => {
            const element = a.find((x: any) => x.Year == b.Year);
            if (element) element.Month.push(b);
            else a.push({ Year: b.Year, Month: [b] });
            return a;
          },
          []
        );

Here is the result

But the desired result Should be

Please Help me out to solve this issue. Thanks in Advance.

Answer 1

Here's a basic codesandbox link I made that should do what you want. https://codesandbox.io/s/xenodochial-rui-bgos9t?file=/src/app/app.component.html

In the typescript I created two member variables called currentYear and currentMonth and assigned them to empty strings.

Check the current year and check if it's equal to the year of the current iteration in the loop. If they are equal, don't display the year. If they are not equal, update the current year variable and display the year.

  displayYear(year: string): boolean {
    if (year === this.currentYear) {
      return false;
    } else {
      this.currentYear = year;
      return true;
    }
  }

Similar to the year logic but for the month.

  displayMonthName(year: string, month: string): boolean {
    if (year === this.currentYear && month === this.currentMonth) {
      return false;
    } else {
      this.currentYear = year;
      this.currentMonth = month;
      return true;
    }
  }

A simplified version of your code.

<section class="milestone-wrapper">
  <section class="milestone-wrap-info">
    <ul class="timeline">
      <li *ngFor="let milestone of data">
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag" *ngIf="displayYear(milestone.Year)"
              >{{milestone.Year}}</span
            >
          </div>
          <div class="desc">
            <label *ngIf="displayMonthName(milestone.Year, milestone.MonthName)"
              >{{milestone.MonthName}}</label
            >
            <p>{{milestone.Details}}</p>
          </div>
        </div>
      </li>
    </ul>
  </section>
</section>

I don't recommed using any it defeats the purpose of typescript.