View is not working until do a click anywhere on the page when updating checkbox angular 2+

Am using Angular 7 in my application. I have functionality to display content based on the selected checkbox. Everything works fine, but after checkbox checked or unchecked content seems updated but the click is not working until click is register anywhere on the page.

Please check the below code.

<div class="col filter_container mb-3 d-table py-2 py-md-0">
          <span class="font-arial-13 font-weight-bold d-table-cell d-lg-inline-block filterKey">Filters:</span>
          <span class="d-table-cell d-lg-inline-block pl-3 filterContent">
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][0].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][0].name, filterArray[filterItem][0].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][1].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][1].name, filterArray[filterItem][1].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][2].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][2].name, filterArray[filterItem][2].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <div class="d-inline-block filterBg">
              <span class="d-inline-block">
                <span class="font-arial-13 d-inline-block mr-3 mr-md-0"><span class="fas fa-circle blueDot"></span></span>
              </span>
              <span class="d-inline-block">
                <label class="container_check font-arial-13 mr-3"><span class="fas fa-circle greenDot"></span>
                  <input type="checkbox" [(ngModel)]="filterArray[filterItem][3].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][3].name, filterArray[filterItem][3].selected, filterItem);">
                  <span class="checkmark"></span>
                </label>
              </span>
              <span class="d-inline-block">
                <label class="container_check font-arial-13 mr-3"><span class="fas fa-circle orangeDot"></span>
                  <input type="checkbox" [(ngModel)]="filterArray[filterItem][4].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][4].name, filterArray[filterItem][4].selected, filterItem);">
                  <span class="checkmark"></span>
                </label>
              </span>
            </div>
          </span>
        </div>

The above is the filter options please check below for the content which will display based on the filter

<td *ngFor="let saColumn of smartColumnName">
                  <div *ngIf="main[saColumn.columnName]">
                    <div *ngFor="let item of parseData(main[saColumn.columnName])">
                      <div *ngIf="item.normal">
                        <ul class="normal pl-0">
                          <li *ngFor="let list of item.normal" class="dotsBlue_smart_intel position-relative">
                            <a [routerLink]="list.link"></a>
                          </li>
                        </ul>
                      </div>
                      <div *ngIf="item.client && (filterArray[filterItem][3].selected || filterArray[filterItem][0].selected )">
                        <ul class="client pl-0">
                          <li *ngFor="let list of item.client" class="dotsGreen_smart_intel position-relative">
                            <a [routerLink]="list.link"></a>
                          </li>
                        </ul>
                      </div>
                      <div *ngIf="item.thirdP && (filterArray[filterItem][4].selected || filterArray[filterItem][0].selected )">
                        <ul class="thirdP pl-0">
                          <li *ngFor="let list of item.thirdP" class="dotsOrange_smart_intel position-relative">
                            <a [routerLink]="list.link"></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </td>

When I update checkbox seems view is updated. But the page is not routing on the first click. It works for second click.

Please help me to solve the issue.