Dev Stack Source

Answer : The focus is needed to be within modal for accessibility and keyboard navigation reasons. By default the focus is on the first focusable element within modal, which in your case is the close button. You can add ngbAutofocus attribute to the element where you want the focus to be. Focus management demo. <button type="button" ngbAutofocus class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button> You can read more on github If you don't mind the close button actually focused but want to get rid of the ugly outline, you can use outline: none . template.html : <button type="button" aria-label="Close">Close</button> styles.css : button[aria-label="Close"]:focus { outline: none; } It's an ugly hack, but you can add a non visible element as the first element: <input type="text" style="display:none" />

Answer : Look into using OnInit lifecycle hook which is processed first when a component is loaded. Documentation For ngOnInit Thats simple enough, then move that call to the service as seen below into the life cycle hook. Give the class a public variable ie public toolTipData: string; (moved into OnInit) this.planService.getAuditDetails(planId, fieldName, fieldValue) .subscribe((auditDetail: AuditDetail) => { this.tooTipData = auditDetail.toolTipInfo // (guessing at name) this.auditDetail = auditDetail; this.loadCompleted = true); }, (errors) => { console.log(errors) // api error status code. } }); In the HTML set the tool tip value to [ngbTooltip]="toolTipData" This should help populate the tool tip appropriately. The asynchronous changes aren't showing up because NgbTooltip window uses ChangeDetectionStrategy.OnPush and the only way to trigger change detection is calling open() on a closed tooltip. In order t...