Angular 2 change detection within *ngFor seems not to work (RC5)

Question

Within my ng2 module a function is called by another module to create an object and push it to an array which is bound to *ngFor in the template. According to the docs https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html it should detect the changes automatically. I can console log the array and everything is there but the selector tag keeps empty. If I use a static array as test it works. I have looked at all seemingly similar Questions here and on other sites and the ChangeDetectorRef in the Docs but all I found was from months ago and resulted in errors if I tried.

This is the marker.component.html:

<div *ngFor="let Marker of Markers" [ngStyle]="Marker.style" (click)="scrollXY(Marker.scrollX, Marker.scrollY)" class="cq">
    {{Marker.title}}
</div>

and this the marker.component.ts:

import { Component } from '@angular/core';
import { Marker } from './marker';
import { WindowService } from '../../window.service';

@Component({
  selector: 'cm-marker',
  templateUrl: 'marker.component.html',
  styleUrls: ['marker.component.css']
})
export class MarkerComponent {

  Markers: Marker[];
  nx0: number;
  ny0: number;
  nx1: number;
  ny1: number;

  constructor(private windowService: WindowService) {
    this.Markers = [
      {
      title: 'Token',
      scrollX: 0,
      scrollY: 0,
      style: {
        'position': 'absolute',
        'z-index': (200 - 5),
        'left': 199900 +'px',
        'top': 199900 +'px',
        'background-color': '#587188'
      }
    }
    ]
  }

  scrollXY(x, y) {
    this.windowService.scrollXY(x, y);
  }

  createMarker(cmelement, x: number, y: number, x1: number, y1: number) {

    let m = (cmelement.y1 - cmelement.y0)/(cmelement.x1  - cmelement.x0);
    let height = Math.abs(cmelement.y1 - cmelement.y0);
    let width = Math.abs(cmelement.x1 - cmelement.x0);
    let sin = (cmelement.y1 - cmelement.y0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let cos = (cmelement.x1  - cmelement.x0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let d = 400 * (1 - Math.sqrt(Math.abs(cos * sin)));
    if(x1 == 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 == 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 != 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    if(x1 != 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height+ (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    let marker0 = {
      title: cmelement.links[1].title,
      scrollX: cmelement.x1,
      scrollY: cmelement.y1,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx0,
        'top': this.ny0,
        'background-color': cmelement.style.object.color0
      }
    }
    // console.log(marker0);
    this.Markers.push(marker0);
    let marker1 = {
      title: cmelement.links[0].title,
      scrollX: cmelement.x0,
      scrollY: cmelement.y0,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx1,
        'top': this.ny1,
        'background-color': cmelement.style.object.color0
      }
    }
    this.Markers.push(marker1);
    // console.log(this.Markers);

  }
}

The static written "Token" is shown and worked as expected, but none of the newly added.

Answer 1

Thanks to @Carbonsound1 's advice I found the solution:

The function @ViewChildbinds a component or directive to the parent component.

IMPORTANT FOR RC6: The previously deprecated @Component.directives was removed. So declaring it within the component will throw an error. Instead you need to declare it in declarations in your app.module file.

I have forked Carbonsound1s plnkr with the changes:

updated app.module.ts:

import { AppComponent }   from './app.component';
import { MarkerComponent } from './marker.component';

@NgModule({
  imports: [ 
    BrowserModule,
    CommonModule
  ],
  declarations: [ AppComponent,
                  MarkerComponent],
  bootstrap:    [ AppComponent ],
  entryComponents: [  ]
})
export class AppModule { }

updated app.component.ts:

@Component({
  selector: 'my-app',
  template: `
  <button (click)="createMarker()">create marker</button>
  <my-marker></my-marker>
  `
})