Kendo UI Dynamic Splitter panes with Angular 2

[Mark]

I'm trying to implement a Kendo splitter pane with dynamically allocated number of panes in Angular 2. I have the kendo-splitter element in the parent component but unless I remove it the child component doesn't get rendered? 

Parent Splitter Component

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-all-deltas',
  template: `<kendo-splitter orientation="vertical" style="height: 340px;">

              <app-brx-delta *ngFor="let b of brxDeltas" [brxDelta]="b"></app-brx-delta>

            </kendo-splitter>`,
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

  constructor() {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }

}

Child Pane Component

import { Component, OnInit, Input} from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-brx-delta',
  template: `<kendo-splitter-pane size="100px">
                <div class="pane-content">
                  <h3>{{brxDelta.deltaName}}</h3>
                </div>
              </kendo-splitter-pane>
              `,
  styleUrls: ['brx-delta.component.scss']
})
export class BrxDeltaComponent implements OnInit {

  @Input('brxDelta') brxDelta:BrxDelta;

  ngOnInit() {
    console.log( this.brxDelta );
  }

}

[Mark]

Very nearly there with this. Below is the latest update on this component. The imgur link below links to the HTML produced. Everything bar the inner ng-container element makes it to the page although the ng-template #deltaPane is processed as if I introduce an error I get an exception that it's undefined.

https://i.stack.imgur.com/hg9Pd.png

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';
import { ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-all-deltas',
  // templateUrl: 'all-deltas.component.html',
  template:`<kendo-splitter orientation="horizontal" style="height: 340px;">

              <ng-template ngFor let-brxDelta [ngForOf]="brxDeltas" let-i="index">

                <kendo-splitter-pane [collapsible]="true" [resizable]="true">
                  <h3>{{brxDelta.deltaName}}</h3>
                  <ng-container *ngTemplateOutlet="deltaPane; context:brxDelta"></ng-container>
                </kendo-splitter-pane>

              </ng-template>

            </kendo-splitter>

            <ng-template #deltaPane>

                <div class="pane-content">
                  <h3>{{deltaName}}</h3>
                </div>

            </ng-template>`
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

  constructor(private cdRef:ChangeDetectorRef) {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2"),
      new BrxDelta("DELTA3")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }


  ngAfterViewChecked()
  {
    console.log( "! Detect changes !" );
    this.cdRef.detectChanges();
  }
}

[Svet]

Hi Mark,

Thank you for the provided sample code.

deltaName is undefined as it is not a component's property. We need to declare it and assign some value to it in order for it not to be undefined.

I would like to provide another approach of achieving the desired functionality. We can have an array of panes with their specific settings (size, orientation etc) and based on that to dynamically create the splitter-panes for the splitter component. Please check the following sample plunker demonstrating this approach:

https://plnkr.co/edit/0yCxmVRlMDXRSDf3sQ48?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik