Dziwne zachowanie offcanvas

Cześć, mam dość dziwną sytuację związaną z offcanvas menu, które powinno wysuwać się po kliknięciu na element HTML o id 'kt_quick_panel_toggler_btnX', gdzie X jest kolejną cyfrą. Mianowicie raz działa prawidłowo wysuwanie, a raz nie działa w ogóle.

SYTUACJA 1 (działa)

x.component.ts

ngOnInit{
this.dashboard = [
      {cols: 2, rows: 1, y: 0, x: 0},
      {cols: 2, rows: 2, y: 0, x: 2, hasContent: true},
      {cols: 1, rows: 1, y: 0, x: 4}
    ];
}

x.component.html

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard; let i=index" >
    <span id="kt_quick_panel_toggler_btn{{i+2}}">AAA</span>
  </gridster-item>
</gridster>

SYTUACJA 2 (nie działa)

x.component.ts
Na etapie wywołania komponentów zawartość tablicy dashboard nie jest znana, jest dopiero uzupełniania już w trakcie działania.

ngOnInit{
this.dashboard = [
    ];
}

x.component.html
Ten plik natomiast nie uległ zmianie, jest dokładnie taki sam.

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard; let i=index" >
    <span id="kt_quick_panel_toggler_btn{{i+2}}">AAA</span>
  </gridster-item>
</gridster>

Teraz pytanie co może być przyczyną, że w przypadku pierwszy 'kt_quick_panel_btnX' wywołuje boczny panel, natomiast w drugim przypadku funkcjonalność ta nie działa?