Not rendering onload of page in angular

[dassram17]

Cant see any images inside the carousel with out any action like screen size change or any other events in a browser. Please suggest me the solution if available.Thank you..

[vitalii-andriiovskyi]

@dassram17

Look at the console. Find out the width of div.ow-stage. or Describe the way to reproduce your issue?

[hidaytrahman]

Yes, am also facing the same issue.

Problem When component loads it shows nothing, but when I resize browser it starts working fine.

Details Angular 8 "dependencies": { "@angular/animations": "~8.2.14", "@angular/cdk": "~8.2.3", "@angular/common": "~8.2.14", "@angular/compiler": "~8.2.14", "@angular/core": "~8.2.14", "@angular/flex-layout": "^8.0.0-beta.27", "@angular/forms": "~8.2.14", "@angular/material": "^8.2.3", "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "@ngmodule/material-carousel": "^0.6.0", "hammerjs": "^2.0.8", "ngx-owl-carousel-o": "^4.0.0", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.803.24", "@angular-devkit/build-ng-packagr": "~0.803.27", "@angular/cli": "~8.3.21", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^5.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "ng-packagr": "^5.4.0", "protractor": "^7.0.0", "ts-node": "~7.0.0", "tsickle": "^0.37.0", "tslint": "~5.15.0", "typescript": "~3.5.3" }

Settings customOptions: any = { loop: true, mouseDrag: false, touchDrag: false, pullDrag: false, dots: true, navSpeed: 700, navText: ['Prev', 'Next'], responsive: { 0: { items: 2 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 4 } }, nav: true }

Template ` <owl-carousel-o [options]="customOptions">

           <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
           <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template> 
           <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
           <ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>  
        </owl-carousel-o>

`

please tell me any workaround

[vitalii-andriiovskyi]

@hidaytrahman

It seems like the carousel starts rendering too early. The carousel always inherits the width of its parent DOM-element. If it has the width of 0 at the moment the carousel starts rendering, .owl-stage and .owl-item get the width of 0, So you don't see the carousel. When you resize, the DOM-element you put the carousel into has the width > 0, the carousel rerenders, takes its width and becomes visible. Check the width of parent DOM-element at the moment the carousel starts rendering itself. If it equal 0, then wait until it's steady and then show the carousel. Also this issue could be caused by your CSS, mostly if parent element has display: flex.

[hidaytrahman]

Thank you, I missed the stopPropagation() currently its working fine. May I contribute to this project?

[anagha-travvise]

Hi, how you solved your issue? facing the same issue can you please help me?