Merge divs with same value from angular [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to make a Calendar of my own
https://stackblitz.com/edit/angular-1kfbod?file=src/app/app.component.css
This is a full example of my component.
How can I merge the week divs that have the same value {{day.weekNumber}} (one div instead of 4 for the example below)?

Answer 1

In your case, you should have separate array for your week numbers.
Typescript
public weekNumbers: number[] = [];
public rowWidth: any = 100 + '%';
ngOnInit() {
...
... // your existing code
...
let weeks = [];
for (let i = 1; i <= this.numberOfDaysCurrentMonth; i++) {
this.daysToDisplayInCurrentMonth[i - 1] = new Date(this.currentYear, this.currentMonth - 1, i).getDay();
const day = {
number: i,
weekDay: new Date(this.currentYear, this.currentMonth - 1, i).getDay(),
name: this.dayNames[this.daysToDisplayInCurrentMonth[i - 1]],
weekNumber: this.getWeekNumber(new Date(this.currentYear, this.currentMonth - 1, i))
};
weeks.push(day.weekNumber);
this.days.push(day);
}
this.weekNumbers = [];
weeks.forEach((ele) => {
if(this.weekNumbers.indexOf(ele) < 0) {
this.weekNumbers.push(ele);
}
});
this.rowWidth = (100/this.weekNumbers.length) + '%';
}
HTML
<div class="row-calendar">
<div class="week-number" [style.width]="rowWidth" *ngFor="let week of weekNumbers">
<label class="number-label"><span>{{week}} </span></label>
</div>
</div>