dynamically create and embed <kendo-datepicker-messages>

[victor]

Hello

starting with

<ng-content>

</ng-content>

<ng-template #TodayTranslation>

    <kendo-datepicker-messages today="HOY"></kendo-datepicker-messages>

</ng-template>

 

I am having trouble dynamically loading kendo-datepicker-messages onto a projected kendo-datepicker. My current approach is to 

get a references to the ng-content and ng-template that will hold the kendo-datepicker like 

@ContentChild(DatePickerComponent, { static:true })  kendoDatePicker: DatePickerComponent;

@ViewChild('TodayTranslation', { static: true })

  todayTranslationRef: TemplateRef<DatePickerCustomMessagesComponent>;

then in AfterContentInit I can create the embeded view and insert it.

 const emb = this.kendoDatePicker.container.createEmbeddedView(this.todayTranslationRef);

 

this.kendoDatePicker.container.insert(emb);

However, the result is a

<kendo-datepicker _ngcontent-qsx-c74="" id="FromCreatedDate-input-to-date"

    class="k-widget k-datepicker ng-untouched ng-pristine ng-valid">

    <!--bindings={

  "ng-reflect-today": "Today",

  "ng-reflect-toggle": "Toggle calendar",

  "ng-reflect-prev-button-title": "Navigate to previous view",

  "ng-reflect-next-button-title": "Navigate to next view"

}--><span class="k-picker-wrap">

        <kendo-dateinput ng-reflect-focusable-id="k-c32845aa-a2d8-4f7c-a99f-96f6" ng-reflect-disabled="false"

            ng-reflect-readonly="false" ng-reflect-title="" ng-reflect-tabindex="0" ng-reflect-role="spinbutton"

            ng-reflect-aria-read-only="false" ng-reflect-format="MM-dd-yyyy" ng-reflect-placeholder=""

            ng-reflect-max="Thu Dec 31 2099 00:00:00 GMT-0" ng-reflect-min="Mon Jan 01 1900 00:00:00 GMT-0"

            ng-reflect-incomplete-date-validation="false" ng-reflect-two-digit-year-max="68"

            ng-reflect-is-popup-open="false" ng-reflect-has-popup="true" class="k-widget k-dateinput">

            <!--bindings={

  "ng-reflect-decrement": "Decrease value",

  "ng-reflect-increment": "Increase value"

}--><span class="k-dateinput-wrap"><input autocapitalize="off" autocomplete="off" autocorrect="off" class="k-input"

                    spellcheck="false" placeholder="" ng-reflect-events="[object Object]"

                    ng-reflect-scope="[object Object]" role="spinbutton" aria-readonly="false"

                    id="k-c32845aa-a2d8-4f7c-a99f-96f6afc7d229" title="" tabindex="0" aria-expanded="false"

                    aria-haspopup="true">

                <!--bindings={

  "ng-reflect-ng-if": "false"

}-->

            </span>

        </kendo-dateinput><span class="k-select" role="button" ng-reflect-events="[object Object]"

            ng-reflect-scope="[object Object]" title="Toggle calendar" aria-label="Toggle calendar"><span

                class="k-icon k-i-calendar"></span></span>

    </span>

    <!---->

    <kendo-datepicker-messages _ngcontent-qsx-c79="" ng-reflect-today="HOY" class="ng-star-inserted">

    </kendo-datepicker-messages>

    <!---->

</kendo-datepicker>

Although there is no errors the 'Today' word in the calendar of the kendo-datepicker does not translate to 'HOY'

Is there a better way to dynamically load kendo-datepicker-messages into a projected kendo-datepicker?