How to display array elements like a matrix using ngFor and table [Angular]

Question

I'm creating a Month picker in Angular. I followed this, this and this also but cannot achieve what I want. I've months from Jan to Dec. I want to display them like a 4X3 matrix. But I'm getting all the months in a single column vertically. Or may be that I'm unnecessarily over complicating my code. Here is my code.

monthpikcer.component.html

<div class="my-table-div">
  <table class="my-table" *ngFor="let row of months">
    <tr class="month-row" *ngFor="let col of row">
      <td class="month-name">{{col}}</td>
    </tr>
  </table> 
</div>

monthpicker.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  ...
})
export class MonthpickerComponent implements OnInit {

  months = [
    ['Jan', 'Feb', 'Mar'],
    ['Apr', 'May', 'Jun'],
    ['Jul', 'Aug', 'Sep'],
    ['Oct', 'Nov', 'Dec']
  ];

  constructor() { }

  ngOnInit() {
  }
}

PS: I don't want to use bootstrap row and col. My code is not working. Please correct me.

Jayesh · Accepted Answer · 2019-11-28 05:40:39Z

1

you can use this

<table class="my-table">
    <tr class="month-row" *ngFor="let row of months; index as i">       
            <table class="my-table">
                <tr class="month-row"  >
                    <td *ngFor="let col of row" class="month-name">{{col}}</td>
                </tr>
            </table>            
    </tr>
</table>

Output is

<table>
<tr><td>Jan</td><td>Feb</td><td>Mar</td></tr>
<tr><td>Apr</td><td>may</td><td>Jun</td></tr>
<tr><td>Jul</td><td>Aug</td><td>Sep</td></tr>
<tr><td>Oct</td><td>Nov</td><td>Dec</td></tr>
<table>

edited Nov 28, 2019 at 5:40

answered Nov 28, 2019 at 5:30

Jayesh

469 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanzeel Over a year ago

This is exactly I was looking for. Thanks

Allabakash · Accepted Answer · 2019-11-28 05:31:51Z

1

You need to use css styles for it like below.

.my-table {
  display: flex;
  flex-direction: row;
}

.month-row {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

checkout this demo - https://stackblitz.com/edit/angular-59081856.

answered Nov 28, 2019 at 5:31

Allabakash

2,0371 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to display array elements like a matrix using ngFor and table [Angular]

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related