Including a widget inside an ng-template record

[NathanHaywood]

Hi everyone,

I have created a new Service Portal Widget which adds some extra fields to the walk-up appointment booking form. This is all working end-to-end, the only thing I'm struggling with now is embedding this new widget inside of a template. 

There is this <walk-up-appointment> component inside my main parent widget. This contains the reason for visit select box + the appointment time slot component, see below:

The component in the main widget (you can see my new widget outside <walk-up-appointment> but in the parent <div>. This shows as expected here but I need this to be after the <div> transcluding 'reasonSelect':. See the template after):

<div ng-if="!c.isLoadingAppointments">
<walk-up-appointment appointment-reselect-objs="c.data.appointmentReselectObjs"
appointment-select="c.data.appointmentSelect"
max-num-appts-user="c.data.maxNumApptsUser"
button-msg="c.data.msgs.scheduleAppointment"
reason-msg="c.data.reasonMsg"
reschedule-msg="c.data.rescheduleMsg"
header-msg="c.data.msgs.bookAppointment"
i-cal-msg="c.data.msgs.iCalLink"
is-reason-selected="c.isApptmntReasonSelected"
create-appointment="c.createAppointment(snAppointment, callback, onBehalf)"
refresh-reselect-widgets="c.refreshReselectWidgets()"
on-behalf="c.data.onBehalf"
is-user-selected="c.isUserSelected"
upcoming-appointments-heading="c.data.upcomingAppointmentsHeading"
max-appts-reached="c.data.msgs.maxApptsReached"
is-loading="c.isDataLoading">

<reason-for-visit-select issue-choices="c.data.issueChoices"
placeholder="data.msgs.issueMsg"
get-search-results="c.getApptmntCTXSearchResults(searchText)"
select-reason="c.onReasonSelect(reason)">
</reason-for-visit-select>
</walk-up-appointment>

<widget id="additional-walk-up-fields"></widget>

</div>

The ng-template in full, including the <div ng-transclude="reasonSelect">:

<div ng-if="!c.onBehalf || (c.onBehalf && c.isUserSelected)">

<!-- Book appointment -->
<div>
<div class="wu_header">
<h4 class="form-header">{{c.headerMsg}}</h4>
<p class="reason-msg">{{c.reasonMsg}}</p>
</div>
<div ng-transclude="reasonSelect"></div>
<br/>
<i class="fa fa-spinner fa-pulse fa-2x" ng-if="c.isLoading"></i>
<div id="appt-select-widget" class="appointment-wrapper" ng-if="!c.isLoading">
<sp-widget widget="c.appointmentSelect"></sp-widget>
</div>
<div ng-transclude="wuContactType"></div>
<br/>
<button ng-aria-label="{{c.buttonMsg}}" type="button" class="btn btn-primary appt-btn" ng-click="c.submitAppointment()" ng-disabled="c.isDisabled()">
{{c.buttonMsg}}
</button>
<p ng-if="c.limitReached" class="limit-reached-msg alert alert-info">
{{c.maxApptsReached}}
</p>
</div>

<!-- Upcoming appointments -->
<div ng-if="c.showApptmntBooking">
<hr/>
<h4 class="wu_header form-header">{{c.upcomingAppointmentsHeading}}</h4>
<p class="reason-msg apt-msg">{{c.rescheduleMsg}}</p>
<div id="appt-reselect-widget" ng-repeat="appointmentReselectObj in c.appointmentReselectObjs">
<div class="appt-reselect" ng-if="appointmentReselectObj.reselectWidget.data.validTask || appointmentReselectObj.state == 'work_in_progress'">
<div>
<div class="reason-text" ng-attr-title="{{::appointmentReselectObj.reasonText}}"><b>${Reason}</b>:&nbsp;{{::appointmentReselectObj.reasonText}}</div>
<p class="p-t-none">
<b>${Appointment type}</b>:
<span class="appointment-type-text" ng-if="appointmentReselectObj.contactType === 'remote'">${Remote}</span>
<span class="appointment-type-text" ng-if="appointmentReselectObj.contactType === 'in_person'">${In-person}</span>
</p>
<div ng-if="appointmentReselectObj.state == 'work_in_progress'">
<p>{{::appointmentReselectObj.windowDisplayValue}}</p>
<p><b>${Duration}:</b> {{::appointmentReselectObj.duration}}hr</p>
</div>
<sp-widget ng-if="appointmentReselectObj.reselectWidget.data.validTask" widget="appointmentReselectObj.reselectWidget"></sp-widget>
<!-- Download link for iCal file -->
<div class="ical-link">
<a href="/sys_attachment.do?sys_id={{::appointmentReselectObj.iCalAttachment}}" target="_blank"><i class="fa fa-calendar-plus-o"></i>{{c.iCalMsg}}</a>
</div>
</div>
</div>
</div>
</div>

</div>

I hope this all makes sense. I am just after making my new widget and its fields appear after the reason select and inbetween the calendar select component. See attached screenshot of UI.

Thanks in advance, Nathan.