The matTooltip in the component below is rendering correctly. The overlay and small bubble for the tooltip are rendered, but the text is missing (even though it's present in the HTML when inspecting in the browser) and it isn't positioned correctly.
What's interesting is that the tooltip works when I remove the detectChanges() call, or it works outside of the *ngFor loop even with detectChanges();
@Component({
selector: 'mur-app-titlebar',
templateUrl: './app-titlebar.component.html',
styleUrls: ['./app-titlebar.component.scss']
})
export class AppTitlebarComponent implements OnInit, OnDestroy {
public appbarItems: IMenuItem[];
private destroy$ = new Subject();
constructor(
private appBarService: AppBarService, // my custom service
private changeDetector: ChangeDetectorRef,
) {
}
public ngOnInit() {
this.appBarService.getAppbarItems().pipe( //observable comes from outside of angular
takeUntil(this.destroy$)
).subscribe(value => {
this.appbarItems = value || [];
// change detection is not triggered automatically when the value is emitted
this.changeDetector.detectChanges();
});
}
public ngOnDestroy() {
this.destroy$.next();
}
}
<ng-container *ngFor="let item of appbarItems">
<button mat-button
(click)="item.onclick && item.onclick()"
[disabled]="item.disabled"
[matTooltip]="item.tooltip"
[style.color]="item.color">
<mat-icon *ngIf="item.icon"
[class.mr-3]="item.label">
{{item.icon}}
</mat-icon>
<span>{{item.label}}</span>
</button>
</ng-container>
I have verified that appbarItems is set only once and does not change