0

I am loading a carousel with web pages on it. I want to grab a parameter and turn to that carousel slide representing the desired page (like a deep link). We've all seen something like this... the desired page element is correctly initialized (pageTurner), but when I go to "selectSlide" the visual element hasn't fully realized and the slide doesn't move.

To fix this, I tried moving my code to ngAfterViewChecked, but then it executed every time I subsequently manually turned the carousel, which would be very bad, but at least it worked on the load. However, when I wrapped that code in a Boolean check for a one time execution (if(loadComplete==false){}), it stopped working altogether in ngAfterViewChecked, which was really confusing. The code executed, but the function no longer worked.

My temp solution is to wait 500 milliseconds to call the function from ngOnIt, and this works, but there has to be a better way to wait until a visual element is ready and act upon it only one time when loading...

export class Carousel implements OnInit {

  @ViewChild(CarouselComponent, {static: true}) pageTurner : CarouselComponent;

  slide: any;
  loadingComplete: boolean = false;

  constructor(private activatedroute:ActivatedRoute) { }

  ngOnInit() {
    this.activatedroute.data.subscribe(data => {
      if (data.slide != undefined) {
        this.slide=data.slide;
        setTimeout(() => this.gotoPage(this.slide), 100);
      }
    })
}

gotoPage(index) {
    this.pageTurner.selectSlide(index);
  }

}
AppDreamer
  • 1,266
  • 3
  • 16
  • 34
  • Maybe you're looking for ngAfterViewInit lifecycle hook, it gets executed once after your view is ready – Anand Bhushan Feb 18 '20 at 18:49
  • Thanks for the suggestion. I just tried it, and while this does execute only once, it executes before the screen objects are fully rendered and the carousel doesn't turn. – AppDreamer Feb 18 '20 at 20:07

0 Answers0