0

I am currently using angular calendar in my project & customized it quite a bit. The customization is done by using <ng-template> and I currently have them all in the same file which got out of hand.

Here's a simplified version:

app.component.html

<!-- Load this from a separate file -->
<ng-template
  #currentTimeMarkerTemplate
  let-columnDate="columnDate"
  let-dayStartHour="dayStartHour"
  let-dayStartMinute="dayStartMinute"
  let-dayEndHour="dayEndHour"
  let-dayEndMinute="dayEndMinute"
  let-isVisible="isVisible"
  let-topPx="topPx"
>
  <div
    class="cal-current-time-marker"
    *ngIf="isVisible && showMarker"
    [style.top.px]="topPx"
  ></div>
</ng-template>
<!-- Load this from a separate file -->

<!-- Use the reference of the above template -->
<mwl-calendar-week-view
  [currentTimeMarkerTemplate]="currentTimeMarkerTemplate"
  [viewDate]="viewDate"
  [dayStartHour]="dayStartHour"
  [dayEndHour]="dayEndHour"
>
</mwl-calendar-week-view>

I tried creating app-my-template.component.html & moved the <ng-template> tag inside of it, then edited app.component.html as follows:

<app-my-template #external_template></app-my-template>
<mwl-calendar-week-view
  [currentTimeMarkerTemplate]="external_template"
  [viewDate]="viewDate"
  [dayStartHour]="dayStartHour"
  [dayEndHour]="dayEndHour"
>
</mwl-calendar-week-view>

But I get the following error:

"Type 'MyTemplate' is missing the following properties from type 'TemplateRef': elementRef, createEmbeddedView"

I also tried this stackoverflow response, however the <ng-template> part is kept outside of the component, which doesn't work in my case since I have a bunch of variables associated with ng-template itself.

As for my question, how do I load the entirety of ng-template including the tag itself from another file? Thank you.

usersina
  • 1,063
  • 11
  • 28
  • try accessing the `ng-template` inside the `app-my-template` component, maybe like `[currentTimeMarkerTemplate]="external_template.currentTimeMarkerTemplate"` – Modar Na Aug 14 '21 at 12:27
  • Using this gives Property `currentTimeMarkerTemplate` does not exist on type `MyTemplate`. I tried adding `@ViewChild('#currentTimeMarkerTemplate') currentTimeMarkerTemplate!: TemplateRef;` inside of `MyTemplate` however it ignores my template & uses the default one. – usersina Aug 14 '21 at 16:14

0 Answers0