I need my ngbpopover to display at the top of the parent element instead of below it. I added container="body" to ngbpopover which resolved this issue, but now the external CSS defined in ng-template is not being applied.
<mat-tab-group animationDuration="0ms">
<div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
<mat-tab label="{{targetData[j][i].fullName}}">
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
<th>row2</th>
<th>row3</th>
<th>row4</th>
<th>row5</th>
<th>row6</th>
<th>row7</th>
<th>row8</th>
<th>row9</th>
<th>row10</th>
</tr>
<tr *ngFor="let target of targetData[j][i].files; let file=index">
<td>
<a class="info-link" href="javascript:;" title="Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
{{(1)}}
</a>
</td>
<td *ngIf="target.qualityLevel > 0; else negativeQuality">
<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>
</td>
<ng-template class="quality-popover" #popContentQuality>
<h1 class="quality-heading">Quality Results for</h1>
<h3 class="file-name">{{target.name}}</h3>
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th>FILE NAME</th>
<th>SIZE</th>
<th>DESCRIPTION</th>
</tr>
<tr *ngFor="let tq of tqData; let i=index">
<td>
<a class="info-link" href="javascript:;">{{tq.name}}</a>
</td>
<td>{{tq.size/1000}} KB</td>
<td>{{tq.description}}</td>
</tr>
</table>
</ng-template>
</tr>
</table>
</mat-tab>
</div>
</mat-tab-group>
The external CSS is only working when inline styles are used. Is there a way to make external CSS work with container="body" for ngbpopover in ng-template? I also attempted to define the external CSS in the component containing the body tag, but that did not solve the issue. Any suggestions on how to resolve this would be greatly appreciated.