Daypilot Angular2 scheduler control not displaying 15/30 min slots in header

You can download a sample project that shows how to customize the time header here:
https://code.daypilot.org/96228/tutorial-javascript-scheduler-time-header-customization

In Angular 2 you can use the same approach, just specify the event handler using the "config" object:

import {Component} from '@angular/core';
import {DayPilot} from "daypilot-pro-angular";

@Component({
  selector: 'angular2-scheduler-example',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler`
})
export class AppComponent {

  config: any = {
    resources: [
        {id: 1, name: "Resource 1"},
        {id: 1, name: "Resource 2"}
    ],
    cellWidth: 60,
    startDate: "2017-01-01",
    days: 7,
    timeHeaders: [
        { groupBy: "Day" },
        { groupBy: "Day", height: 30}
    ],
    scale: "Hour",
    onBeforeTimeHeaderRender: args => {
        if (args.header.level === 1) {
            args.header.areas = [];
            for (var i = 1; i < 24; i++) {
                var point1 = args.header.start.addHours(i);
                args.header.areas.push({
                    start: point1.addMinutes(-1),
                    width: 1,
                    top: 20,
                    height: 10,
                    backColor: "black"
                });
                args.header.areas.push({
                    start: point1.addMinutes(-30),
                    end: point1.addMinutes(30),
                    top: 0,
                    height: 10,
                    html: point1.toString("htt").toLowerCase()
                });
            }
            for (var i = 0; i < 24; i++) {
                var point1 = args.header.start.addHours(i);
                args.header.areas.push({
                    start: point1.addMinutes(15),
                    width: 1,
                    top: 20,
                    height: 5,
                    backColor: "black"
                });
                args.header.areas.push({
                    start: point1.addMinutes(30),
                    width: 1,
                    top: 20,
                    height: 10,
                    backColor: "black"
                });
                args.header.areas.push({
                    start: point1.addMinutes(45),
                    width: 1,
                    top: 20,
                    height: 5,
                    backColor: "black"
                });
            }
            args.header.areas.push({
                left: 0,
                right: 0,
                top:20,
                height: 1,
                backColor: "black"
            });
            args.header.html = "";
        }
    }    
  }
}