Saturday 15 October 2022

Reusable ng-template with parameters




<ng-template #loading let-overlayHeight="overlayHeight"
let-loaderLeft="loaderLeft" let-marginTop="marginTop">
<div class="overlay" [style.marginTop]="marginTop || ''"
[style.height]="overlayHeight || '100%'" style="position:relative;">
<div class="loader" [style.left]="loaderLeft || '40%'"
        style="position:relative;top:35%">
<svg viewBox="0 0 86 80">
<polygon points="43 8 79 72 7 72"></polygon>
</svg>
</div>
</div>
</ng-template>


Use

<ng-template *ngIf="paretoProductCategoriesChartLoading"
[ngTemplateOutlet]="loading"
[ngTemplateOutletContext]="{overlayHeight: '280px',marginTop:'20px'}">
</ng-template>

Create a common Html element within angular template.