<section class="cat-dot-hover" #catCard (mouseenter)='hoverActive(catCard,true)' (mouseleave)='hoverActive(catCard, false)' (click)="selectTheCat(cat)">
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
        <div *ngIf="!(cat.isSelected)">
            <app-avatar-pic [initials]="Initials(cat.description)" [style.backgroundColor]="colors[color]" *ngIf="!didHover"></app-avatar-pic>
            <img src="{{imageUrl}}/assets/img/employee/profile/check_inactive.png" alt="forCheck" *ngIf="didHover " class="selectionimg">
        </div>
        <div *ngIf="(cat.isSelected)">
            <img src="{{imageUrl}}/assets/img/employee/profile/check_inactive.png" alt="forCheck" class="selectionimg">
            <img src="{{imageUrl}}/assets/img/employee/profile/check_active.png" alt="forCheck" class="imgselected">
            <!-- <input type="checkbox" style="visibility: hidden" value="cat.skillCategoryId" /> -->
        </div>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-9 col-xs-8">
        <span class="pull-left cat-descp">{{cat.skillTrackName}}</span>
    </div>
</section>