Angular - LeaderLine not displaying line

<div fxLayout="row">
 <div fxFlex="30">
  <mat-card id = "item-1">
  </mat-card>
  <mat-card id = "item-2">
  </mat-card>
 </div>

 <div>
  <--some code-->
 </div>

 <div fxFlex="30">
  <mat-card id = "item-3">
  </mat-card>
  <mat-card id = "item-4">
  </mat-card>
 </div>

</div>

In this code, Im trying to join the line for the div ids 1 to 3 and 2 to 4 using leader-line. the function in ts to draw line is as follows

    drawLine(index1, index2) {
        let element1Id = 'item-' + index1;
        let element2Id = 'item-' + index2;
        let startElement = this.document.getElementById(element1Id);
        let endElement = this.document.getElementById(element2Id);
        let line = new LeaderLine(startElement, endElement, {
            color: 'red',
            size: 8
        });
        line.color = 'red'; // Change the color to red.
        line.size++; // Up size.
        this.cdRef.detectChanges();
    }

this.drawLine(1,3);
this.drawLine(2,4);

I have imported all the leader line requirements but the line seems to be not displayed. The code is in a component which is used on a popup dialog modal.