Angular 2 AOT with template tags cause flickering every time change detection runs

221 Views Asked by At

Whenever I use AOT with the angular cli I get this weird flicker on one of my components whenever I use a template tag to pass content to it.

Component:

export class SelectComponent implements ControlValueAccessor, OnDestroy, OnInit {
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  / .... /
}

Component template:

<div #select>
  <ul>
    <li>
      <div #toggler (tap)="toggle()">
        <span #selected>
          <template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: model}"></template>
        </span>
      </div>
      <ul>
        <li *ngFor="let option of options" (tap)="selectOption(option)">
          <span #optionContent>
            <template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: option}"></template>
          </span>
        </li>
      </ul>
    </li>
  </ul>
</div>

Usage:

<custom-select [(ngModel)]="currentVariant" [options]="options">
  <template let-option>
    <span *ngFor="let text of [option?.engine?.name, option?.supplements, option?.engine?.fuelType?.name, option?.engine?.horsepowers ? option?.engine?.horsepowers + 'hk' : option?.engine?.horsepowers]">{{text}}</span>
  </template>
  <template let-model>
    <span *ngFor="let text of [model?.engine?.name, model?.supplements, model?.engine?.fuelType?.name, model?.engine?.horsepowers ? model?.engine?.horsepowers + 'hk' : model?.engine?.horsepowers]">{{text}}</span>
  </template>
</custom-select>

Does anyone know what's happening here? Can't find any information about it unfortunately.

0

There are 0 best solutions below