Angular2+ whole DOM flicker on component load ngFor

Question

When a user clicks an item it adds it to a list. To render the list i'm using an ngFor. After the user adds the first item to the selected list the whole screen/DOM flickers (everything disappears and reappears). This does not happen when the user then adds a second element to the selected array

Here is my ngFor loop:

<div
  *ngFor="let sel of selected"
    class="cw-selected-list-item"
 >
 <div class="cw-selected-name t4">{{ sel.id }}</div>
   <app-checkbox class="cw-selected-r-tick"></app-checkbox>
   <app-checkbox class="cw-selected-rw-tick"></app-checkbox>
 </div>

When I comment out my app-checkbox components the flicker does not appear. Below is my app-checkbox component

TS

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
@Component({
 selector: "app-checkbox",
 templateUrl: "./checkbox.component.html",
 styleUrls: ["./checkbox.component.scss"],
})
export class CheckboxComponent implements OnInit {
 @Input() checked = false;
 @Output() checkChanged = new EventEmitter();

constructor() {}

ngOnInit(): void {}

toggleChecked() {
  this.checked = !this.checked;
  this.checkChanged.emit(this.checked);
 }
}

HTML

<div
 class="checkbox clickable"
 [ngClass]="{ 'checkbox-active': this.checked }"
 (click)="toggleChecked()"
>
<img
 class="checkbox-image"
 [ngStyle]="{ opacity: !this.checked ? 0 : 1 }"
 src="assets/buttons/tick.png"
/>

Any help would be much appreciated

EDIT

When the user clicks it simply call this function

  selected = [];

  public addToSelected(item: Document) {
   this.selected.push(item);
  }

HTML

    <div
      *ngFor="let hit of hits"
       class="aisd-hit t4"
       [ngClass]="{ 'hit-disabled': this.isAlreadySelected(hit) }"
       (click)="
          this.isAlreadySelected(hit) ? undefined : this.addToSelected(hit)
        "
     >

isAlreadySelected function

  isAlreadySelected(doc: Document) {
   return this.selected.includes(doc);
  }

Answer 1

I found it!

It was importing my fonts locally through .woff2 files which was creating a full DOM refresh when a new component was created after view init.

Hope this helps someone

Example import:

  url(/assets/fonts/opensans/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)
  format("woff2");