Angular DevExpress popup not showing title on first load

For some reason when I open the popup it doesnt show the title (My Title) on the first open. If i close it and reopen it works fine after that.

What could be the reason for this?

html:

<div class="d-flex justify-content-end align-items-center icon-list">
    <div *ngFor="let connector of connectors; let i=index" class="icon-item">
        <span id="connector-{{conn.Id}}" role="button" (click)="openPopup(conn, $event)">
        </span>
        <dx-tooltip [target]="'#con' hideEvent="mouseleave"
            position="bottom">{{ conn.Name}}</dx-tooltip>
    </div>
</div>
<dx-popup [showTitle]="true" [title]="MyTitle" [(visible)]="showPopup" width="auto" height="auto" [resizeEnabled]="true" >
    <dxo-position [of]="popupPosition.of" [at]="popupPosition.at" [my]="popupPosition.my"
        [offset]="popupPosition.offset">    
    </dxo-position>
    <app-conn-item *ngIf="currentSelection" [conn]="currentSelection" [bp]="bp"></app-conn-item>
</dx-popup>

component:

  currentSelection: IntConn | null = null;
  MyTitle;
  showPopup: boolean = false;

  openPopup(conn: IntConn, event: MouseEvent): void {

    // find the position of the popup
    const targetElement = event.target as HTMLElement;
    const rect = targetElement.getBoundingClientRect();

    this.popupPosition = {
      of: targetElement,
      my: 'right top',
      at: 'right top',
      offset: { x: 0, y: rect.height }
    };


    // set the connector and show the popup
    this.currentSelection = conn;
    this.MyTitle = "asdfd";
    this.showPopup = true;
  }