Как выбрать элемент внутри ngx-datatable-column для использования jquery?

Question

Внутри моего ngx-datatable-column у меня есть класс "info", который сначала скрыт..

<ngx-datatable-column name="Basic Info" [width]="250">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <div class="user" >
                    <div class="media">
                        <img class="align-self-center mr-3" src="assets/images/profile.png" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0">{{row.firstName}} {{row.lastName}}</h5>
                            <p class="mb-0">{{row.email}}</p>
                        </div>
                    </div>
                    <div class="info">
                        <div class="col">
                            <p>Name: {{row.firstName}} {{row.lastName}}</p>
                            <p>Email: {{row.email}}</p>
                            <p>Phone No: {{row.mobileNumber}}</p>
                        </div>
                    </div>
                </div>

            </ng-template>
        </ngx-datatable-column>

Это мой код для jquery внутри.ts файла

  ngOnInit() { 
$('.info').mouseover(function (e) {
  console.log("datatable-body-row mouseOver Called...");
});

}

это мой CSS для класса.info

  .info{
        display:none;
        position:absolute;
        background: #fff;
        box-shadow: 0 0 30px 0 rgba(200, 200, 200, 0.2);
        padding:1rem;
        top: 0;
        width:400px;
        z-index: 9;
        .col{
            width:50%;
            float:left;
        }
    }

На Hover я хочу показать этот класс информации.... Но jquery не работает с этим классом.. Так как мне это сделать?