Carousel some times display no itens

[brunork26]

So, Im creating a carousel with data from the backend, I populate its array in the constructor function: this is my component.ts:

export class HomeComponent implements OnInit {

  rodeos = [];
  @ViewChild('carousel') carouselElement;
  showInitialized = false;
  actions = new EventEmitter<string>();

  constructor(private elementRef: ElementRef,
              private authService: AuthService,
              private rodeoService: RodeosService) {
  }

  ngOnInit() {
    this.rodeoService.getRodeoList().subscribe(
      data=>{
        this.rodeos = data;
      }
    )
  }

  isLoggedIn(){
    return this.authService.isLoggedIn();
  }
}

My html is like this:

<div #carousel class="carousel" [ngClass]="{ 'initialized': showInitialized }" materialize="carousel">
          <div *ngFor="let rodeo of rodeos" class="carousel-item">
            <!--<div class=''>-->
              <div class="rodeio-card">
                <div class="card">
                  <div class="card-image">
                    <!--Id do rodeio-->
                    <a [routerLink]="['/rodeio/1/info']"><img src="../../../assets/images/banner.png" class="img-responsive"></a>
                  </div>
                  <div class="card-content">
                    <h5><b></b></h5>
                    <div class="row">
                      <div class="col s6">
                        <div class="infos">
                          <img src="../../../assets/images/icon_calendario.png" class="img-responsive">
                          <h4>Data de Início</h4>
                          <h5><b>20/10/2018</b></h5>
                        </div>
                        <div class="infos">
                          <img src="../../../assets/images/ico-location.png" class="img-responsive">
                          <h4>Local</h4>
                          <h5><b>Viamao</b></h5>
                        </div>
                      </div>
                      <div class="col s6">
                        <div class="infos">
                          <img src="../../../assets/images/icon_calendario.png" class="img-responsive">
                          <h4>Data de Encerramento</h4>
                          <h5><b>22/10/2018</b></h5>
                        </div>
                        <div class="infos">
                          <a class="waves-effect waves-light btn btn-inscricao">Inscrição</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <!--</div>-->
          </div>
        </div>

Some times when I reload the page it loads with the property display: none and no transform property, and so nothing appears:

And when it appears its like that:

This happens in all browsers, some times the cards show, other times it doesn't.

[ghost]

I have same issue, but i did not find the problem yet :(

[brunork26]

I end up with something like this:

export class HomeComponent implements OnInit {
  public rodeos = [];
  @ViewChild('carousel') carouselElement;
  public showInitialized = false;
  public actions = new EventEmitter<string|MaterializeAction>();

  constructor(private elementRef: ElementRef ) {
    window.setTimeout(() => {
      this.carouselElement.nativeElement.classList.toggle('initialized');
      this.actions.emit('carousel');
    }, 5000);
  }
...
}

But still not the best solution. Setting TimeOut too 2000 sometimes didn't load the data from the api, setting to 5000 takes too long but its working.