Customize kendo panelbar item header

I have the following panelbar:

     <kendo-panelbar *ngIf="mainMenu" 
        [expandMode]="expandMode">
        <kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
          [routerLink]="menuItem.link" routerLinkActive="active">
            <kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub" 
            [routerLink]="menuItemSub.link" routerLinkActive="active">
            </kendo-panelbar-item>
        </kendo-panelbar-item>
      </kendo-panelbar>

An example of the generated item is like this:

    <kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge" 
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge" 
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem" 
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
    <span class="k-link k-header">
        <!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
        <span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon" 
        ng-reflect-ng-class="[object Object]">
        </span>
        <!--bindings={"ng-reflect-ng-if": ""}-->
        Dashboard Edge
        <!--bindings={}-->
        <!--bindings={"ng-reflect-ng-if": "false"}-->
    </span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>

How can I customize the content of the item (with HTML) so that I can get more control of how the information is displayed? For instance, I would like to have the title wrapped in a <span> tag with some specific class.

I'm able to customize the content using templates, but not the header itself.

Solution

Telerik support helped me with this.

Basically, you only need to:

Pass null to [title] binding
And create the ng-template with the kendoPanelBarItemTitle directive

Here is an example:

<kendo-panelbar *ngIf="mainMenu" 
        [expandMode]="expandMode">
        <kendo-panelbar-item [title]="null" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
          [routerLink]="menuItem.link" routerLinkActive="active" [attr.name]="menuItem.name">
            <ng-template kendoPanelBarItemTitle>
                <span class="item-title">{{menuItem.title}}</span>
            </ng-template>
            <kendo-panelbar-item [title]="null" *ngFor="let menuItemSub of menuItem.sub" 
            [routerLink]="menuItemSub.link" routerLinkActive="active" [attr.name]="menuItemSub.name">
            <ng-template kendoPanelBarItemTitle>
                <span class="sub item-title">{{menuItemSub.title}}</span>
            </ng-template>
            </kendo-panelbar-item>
        </kendo-panelbar-item>
      </kendo-panelbar>

Example provided by Telerik guys: example