Angular5: Need to prevent ngbTooltip from rendering before data is returned from observable

I'm new to angular 2+, and inherited an incomplete project. My goal is to create a tooltip that checks for audit details on a particular field, and displays them. An example might be:

"Updated by Seth, on 8/18/18."

To do this I've created a componentin angular that passes all relevant information back via a service. I can see that the service call is working as expecte by looking in the web debugger. Unfortunately, what is rendering is a tooltip with the following incomplete text:

 "updated by , " 

Here is my component template.

<ng-template #tipContent>
<span *ngIf="loadCompleted">Updated By , </span>
</ng-template>
<i [ngbTooltip]="tipContent" (mouseenter)="refreshAuditDetail()" class="fas fa-info-circle fa-sm"></i>

Here is the component typescript.

@Component({
 selector: 'audit-tooltip',
 templateUrl: './audit-tooltip.component.html',
 styleUrls: ['./audit-tooltip.component.css']
})
export class AuditTooltipComponent {
 @Input() plan: Plan;
 @Input() fieldName: string;
 auditDetail: AuditDetail;
 loadCompleted: boolean = false;

constructor(private planService: PlanService) { }

refreshAuditDetail() {
 var planId = this.plan.id;
 var fieldName = this.fieldName;
 var fieldValue = this.plan[this.fieldName];
 this.loadCompleted = false;


this.planService.getAuditDetails(planId, fieldName, fieldValue)
  .subscribe((auditDetail: AuditDetail) => {
    console.log(auditDetail);
    this.auditDetail = auditDetail;
  }, () => {}, () => this.loadCompleted = true);
}
}

And, if necessary, here is where I'm using it.

  <h5 class="card-title"><audit-tooltip [fieldName]="fieldName" [plan]="plan"></audit-tooltip> </h5>

What am I missing?

from Angular5: Need to prevent ngbTooltip from rendering before data is returned from observable