Can't update my grid display (ngFor)

[MrNod]

Hi,

I need an calendar view in my application, so I first tried to use this:

twinssbc/Ionic2-Calendar

it was a success, but unfortunatly the calendar is not enough customable for me and there’s some performance issue on android which is my main target for this app…
So I decided to create my own calendar from scratch!

I succeeded to make one, and I tried to add an ion-slider to make it look like a real calendar view.
Unfortunatly, my grid is not updating when I slide…
I put a console.log() to check if my array is being updated, and it is… So the problem is the slider or the grid display.
So I tried to use the NgZone workround but it didn’t work.

Do you guys have any idea how I can fixe that issue? Even a clue could be great!

Here’s my code:

-> the typescript file:

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

@Component({
  selector: 'page-agenda2',
  templateUrl: 'agenda2.html'
})
export class Agenda2Page {
    currentDate: Date;
    grid: number[][];
    currentMonth: number;
    monthNames: string[] = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre","Novembre","Décembre"];
    firstTime: boolean;

    constructor(){
        this.currentDate = new Date();
        this.currentMonth = this.currentDate.getMonth();
        this.grid = [];
        for(let i = 0; i < 6; i++) {
            this.grid[i] = [];
            for(let j = 0; j < 7; j++){
                this.grid[i][j] = 0;
            }
        }
        this.firstTime = true;
        this.initializingAgenda();
    }

    initializingAgenda() {
        let tmpGrid: number[][];
        let firstOfMonth = this.currentDate;
        firstOfMonth.setDate(1);
        let day = firstOfMonth.getDay();
        let maxDayInMonth = this.getMaxDayOfMonth(this.currentDate.getMonth());
        let maxDayOfPastMonth;
        if(this.currentDate.getMonth() == 1) {
            maxDayOfPastMonth = 12;
        } else {
            maxDayOfPastMonth = this.getMaxDayOfMonth(this.currentDate.getMonth()-1);
        }
        let i = 0, j = 0;
        for(let counter = 0; counter < 42; counter++) {
            if(counter < day) {
                this.grid[i][j] = maxDayOfPastMonth - day + 1 + counter;
            } else if(counter >= day && counter < maxDayInMonth + day) {
                this.grid[i][j] = counter - day + 1;
            } else {
                this.grid[i][j] = counter - maxDayInMonth - day + 1;
            }
            j++;
            if(j%7 == 0) {
                i++;
                j=0;
            }
        }
        console.log(this.grid.toString());
    }

    getMaxDayOfMonth(month: number) {
        if(month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 11) {
            return 31;
        } else if( month == 1) {
            return 28;
        } else {
            return 30;
        }
    }

    onNextMonth() {
        if(this.firstTime) {
            this.firstTime = false;
        } else {
            this.currentDate.setMonth(this.currentDate.getMonth()+1);
            this.currentMonth = this.currentDate.getMonth();
            this.initializingAgenda();
        }
    }

    onPreviousMonth() {
        this.currentDate.setMonth(this.currentDate.getMonth()-1);
        this.currentMonth = this.currentDate.getMonth();
        this.initializingAgenda();
    }
}

and the html file:

<ion-header>
  <ion-navbar color="mainColor">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Title</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content class="card-background-page">
    <h2>{{monthNames[currentMonth]}}</h2>
    <ion-slides loop="true" direction="horizontal" (ionSlideNextStart)="onNextMonth()" (ionSlidePrevStart)="onPreviousMonth()">
        <ion-slide>
            <ion-grid>
                <ion-row text-center>
                    <ion-col>
                        Lun
                    </ion-col>
                    <ion-col>
                        Mar
                    </ion-col>
                    <ion-col>
                        Mer
                    </ion-col>
                    <ion-col>
                        Jeu
                    </ion-col>
                    <ion-col>
                        Ven
                    </ion-col>
                    <ion-col>
                        Sam
                    </ion-col>
                    <ion-col>
                        Dim
                    </ion-col>  
                </ion-row>
                <ion-row *ngFor="let row of grid" text-center>
                    <ion-col *ngFor="let col of row">
                        {{col}}
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-slide>
    </ion-slides>
</ion-content>

Also, if you have see anything to improve my coding, I’d be glad to hear about it, because I’m a beginner

Thanks for your times!