Window - Angular Service - Set title dynamically in TitleBar Template

[Christian]

When using a TemplateRef for the titleBarContent - the template only uses the window service in ngTemplateOutletContext as 'let-win' for the action buttons - is there a possibility to set the title programmatically?

In the examples the title is always hard-coded in the template:

<ng-template #windowTitleBar let-win>
    <div class="k-window-title">Custom TitleBar</div>
    <button kendoWindowRestoreAction [window]="win"></button>
    <button kendoWindowMaximizeAction [window]="win"></button>
    <button kendoWindowCloseAction [window]="win"></button>
</ng-template>

[Valentin]

Hi Cristian,

Thank you for the provided details.

One way to achieve changing the title content programmatically is to use a component property which value is updated manually when needed. Please see the following demo demonstrating how the title content is changed on the click of a button:

https://stackblitz.com/edit/angular-9gg7bg-hm5m6g?file=app/app.component.ts

A similar approach can be achieved on any user-defined event.

I hope this helps. Please check the example and let me know in case any further information is required for this case.

Regards,
Valentin
Progress Telerik

[Christian]

Hi Valentin,

thanks for the reply, but this is not the solution I was looking for ;)

I think I need to specify my need for the local template context variable:

I wrapped the windowService from Kendo in my own service to use it with predefined configs etc.
To be able to load a TemplateRef for the titlebar, I created a WindowTemplateInjector Component which only loads the templates as ViewChilds and saves them in my service.

At this point I only got the TemplateRef without any context - the context is added in the kendo window titlebar component as follows:

Component({
        selector: 'kendo-window-titlebar',
        template: `
           <ng-content *ngIf="!template"></ng-content>
           <ng-template
               [ngTemplateOutlet]="template"
               [ngTemplateOutletContext]="{'$implicit': service}" *ngIf="template">
           </ng-template>
       `
}),

So in this case only the service is added as context and I'm not able to retrieve any title vars from my service or component.

[Christian]

While writing an example in stackblitz I found a working solution - I use my window service to get the Window Title in the template component - this seems to work in the stackblitz example - I still need to verify it in my app, but I think this will work there too! :)

Here's a link to my stackblitz example if somebody else is also interested in this: https://stackblitz.com/edit/angular-9gg7bg-ynhwuw

 

[Valentin]

Hi Cristian,

Thank you for sharing the solution with the community. I can affirm that the example seems to be correct.

Regards,
Valentin
Progress Telerik