Reset Angular template reference variable

Question

In my Angular application I use this code with the template reference variable swiper

div *ngIf="stateName == 'SCHEDULE'">
  <swiper-container #swiper [pagination]="true">
  ...

If stateName changes from SCHEDULE to another string and than back do SCHEDULE than the @ViewChild variable is undefined in component (@ViewChild('swiper') public swiperRef: ElementRef | undefined;)

My question now would be how can I reset te swiperRef variable?

Answer 1

Try use ChangeDetectionRef.detectChanges after stateName changes.