How to push elements in an Array of Array in Typescript

Question

I'm new to typescript. I've created a Monthpicker widget in Angular. Originally, It is very complicated and have lots of functionalities. So, I'll try to keep it as simple as possible. Here is my code.

monthpicker.component.ts

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

@Component({
  ...
})
export class AppComponent  {

  monthsViewSlices: Array<Array<number>>;

  ngOnInit(): void {
    this.monthsViewSlices = [[0, 24], [6, 30], [18, 42], [30, 54], [42, 66], [54, 78]];
    console.log(this.monthsViewSlices);
  }
}

And these monthViewSlices are actually slices like this:

Month indexes are starting from 0. As you can see I've hard-coded slices as follows:

this.monthsViewSlices = [[0, 24], [6, 30], [18, 42], [30, 54], [42, 66], [54, 78]];

Which is not a very good thing to do. I want to make this configurable using for loops. I tried this code:

  ngOnInit(): void {
    const lowerBound=2012;
    const upperBound=2015;
    let x;
    let y;
    let z;
    let iterations=upperBound-lowerBound;
    for(x=lowerBound; x<=upperBound; x++) {
      for(y=0; y<=24; y++) {
        //DO NOTHING JUST ITERATE
      }
      this.monthsViewSlices.push([0,y]);
    }
    console.log(this.monthsViewSlices);
  }

But I don't know how to deal with Array<Array<number>>. I also tried taking help from these:

1. “push()” to an array in Typescript
2. How to Push object in an array of array
3. typescript push elements into an array in roundrobin fashion
4. Array of Arrays in TypeScript

Simple push() method will not work here. That I've tried. Or mayne not in the correct way. So, I've to a lot of gymnastics here.

But I'm not able to make this dynamic instead of hard coding.

Following things should be taken care of:

1. Number of slices are equal to number of iterations which is upperBound-lowerBound
2. Difference between first and second slice is 6 while for rest it is 12:

I've created a stackblitz also. Please someone help me achieve this. Let me know if more details are required to this question. And also tell me if it is even doable or I am wasting my and everyone's time.

Answer 1

If I've read your example correctly, you want 3 "slices" (the difference between 2012 and 2015 in this case), resulting in

[0, 24]
[6, 30]
[18, 42]

I've forked your stackblitz here

You weren't wrong with how you were manipulating your arrays (I personally prefer to type arrays as [] rather than Array<>, but that's just a personal preference), the loop logic just needed a little help.

Edit: Code from the stackblitz fork:

  years: number[] = [];
  monthsViewSlices: number[][] = [];

  ngOnInit(): void {
    const lowerBound=2012;
    const upperBound=2015;

    let x = 0;
    let y = 24;
    let iterations=upperBound-lowerBound;
    for(let i=0; i<iterations; i++) {      
      this.monthsViewSlices.push([x, y]);
      const increment = i === 0 ? 6 : 12;
      x+=increment;
      y+=increment;

    }
    this.monthsViewSlices.forEach(slice => console.log(slice));
  }