How to adding elements at runtime

[IRobot1]

I'm trying to use *ngFor to add custom elements at runtime, but its not working.

I couldn't find this use-case on the Core API Objects documentation

import { AfterViewInit } from '@angular/core';
import { Component } from '@angular/core';
import { Vector3 } from 'three';

class Cube {
  constructor(public name: string, public position: Vector3) {}
}

@Component({
  selector: 'app-root',
  template: `
<div style="height:100vh">
  <ngt-canvas [shadows]="true"
              [gl]="{ alpha: false }"
              [camera]="{ position: [-1, 5, 5], fov: 45 }"
              [scene]="{ background: 'lightblue' | color }">
    <ngt-ambient-light></ngt-ambient-light>
    <ngt-directional-light [position]="[10, 10, 10]"
                           [castShadow]="true"
                           [shadow]="{ mapSize: [2048, 2048] | vector2 }"></ngt-directional-light>

    <ngt-physics [allowSleep]="true">
      <ngt-cannon-debug>
        <storybook-plane [position]="[0, -2.5, 0]"></storybook-plane>
        <storybook-cube *ngFor="let cube of cubes" [name]="cube.name" [position]="cube.position"></storybook-cube>
      </ngt-cannon-debug>
    </ngt-physics>
  </ngt-canvas>
</div>`
})
export class AppComponent implements AfterViewInit {
  cubes: Array<Cube> = [];

  ngAfterViewInit(): void {
    let count = 0;
    setInterval(() => {
      if (this.cubes.length > 9) {
        this.cubes.splice(0, 1);
      }
      this.cubes.push(new Cube('cube' + count.toString(), new Vector3(0, 20, Math.random() * -2)));
      count++;
    }, 1000);
  }
}

[IRobot1]

It was a coding error. Cannon position needs to be Vec3, not Vector3.
Simple fix is

<storybook-cube *ngFor="let cube of cubes" [name]="cube.name" [position]="[0, 20, cube.position.z]">