
<ng-container *ngTemplateOutlet="template == 'loaderTempl' ? loaderTempl :(template == 'questionsTempl' ? questionTempl : thankyouTempl)"></ng-container>

<ng-template #questionTempl>
    <course-question-header  
    (onPrevious)="onSelectPrevious($event)" 
    (onNext)="onSelectNext($event)" 
    (onFinish)="onSelectFinish()" 
    [totalQuestions]="questionList ? questionList.length : 0 " 
    [categoryDesc]="categoryDesc"></course-question-header> 

    <course-question-contents [currentQuestion]="questionList[currentQuestion-1]"
    [currQuesNo]="currentQuestion - 1"></course-question-contents>
</ng-template>

<ng-template #thankyouTempl>
    <div class="messageCont">
        <img class="courseQuesDoneImg" [src]="ASSET_IMG_URL + '/svg/course-done.svg'">
        <span class="thankYouMsg">Thank You {{userInfo ? userInfo.userName : 'User'}}</span>
        <span class="apprMsg">We appreciate your time and efforts for completing this course on '{{courseName}}'.</span>
        <span class="apprMsg">We will get back to you shortly</span>
        <button mat-flat-button class="courseDoneButton"  (click)="closeOverlay();">Done</button>
    </div>
</ng-template>

<ng-template #loaderTempl>
    <div class="courseQues-loader-container">
<!--         <mat-spinner class="courseQues-loader"></mat-spinner> -->
        <img class="courseQues-loader" src="dashboard/assets/images/svg/loading.svg" /> 
    </div>
</ng-template>

