CODEWITHSUNDEEP
angularngforangular8stackblitz
Travis
Travis

Reputation: 1816

How do I display the values of a 2d array in angular 2+ in the template file for a yearly calendar?

I'm trying to build a yearly calendar. Now I could have 12 month parents and all the children and that would do the trick, but I would rather cut down on html. I have a variable called yearlyCalendarArr which is the 2d array of months with the correct days in them along with spaces (it's consoled logged in the stackblitz).

HTML

<div id="yearly-calendar">
  <div class="month-holder" *ngFor="let days of yearlyCalendarArr; let i = index">
    <div class="month">
      <div class="month-header">
        <h5 class="month-name">{{months[i]}}</h5>    
      </div>

      <div class="month-body">
        <div class="week-divider">
          <div class="weekday" *ngFor="let w of weekdays">{{w[0]}}</div>
        </div>

        <div class="week-divider">
          <div class="calendar-box"></div>
        </div>
      </div>  
    </div>
  </div>
</div>

Upvotes: 0

Views: 210

Answers (1)

jitender
jitender

Reputation: 10429

Loop through day in days array something like

 <div class="month-divider">
     <div class="item" *ngFor="let d of days;let di=index">
       <div>{{d}}</div>
       </div>
    </div>

css

.month-divider {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
   display: contents;
}
.item>div{

 width: 1.2em;
 flex:1;
  background: gold;
  text-align: left;
}

.item:nth-child(7n)::after {
  content: '';
  width: 100%;
}

You may need some css fixes on big screen

demo

Upvotes: 1

Related Questions