search

cloudinary / cloudinary_angular

Cloudinary Angular client library
MIT License
305 stars 228 forks source link

<cl-image responsive> within <ngb-carousel> #85

Closed bjornharvold closed 7 years ago

bjornharvold commented 7 years ago

I think this is related to this ticket: https://github.com/cloudinary/cloudinary_angular/issues/55

I am using Angular 2 ng-bootstrap (https://ng-bootstrap.github.io/#/components/carousel)

If I have a carousel and I put cl-image with the attribute 'responsive' it will fail with a NoProviderError No provider for TemplateRef.

<ngb-carousel [interval]="myInterval" [wrap]="wrapSlides" ngIf="images"> <template ngbSlide ngFor="let image of images">

        <cl-image public-id="{{image.imageIdentifier}}"
                  width="270" responsive
                  height="150"
                  crop="fill"
                  gravity="auto"
                  fetch_format="auto"
        >
        </cl-image>

      </template>
    </ngb-carousel>
eitanp461 commented 7 years ago

@bjornharvold I got it to work with this Codepen project - https://codepen.io/eitanp461/project/editor/AObmaX/#0

Can you please add more details about your use case?

bjornharvold commented 7 years ago

@eitanp461 but you are cheating my friend. I am still on Angular 2.4.10 while I wait for you to support Angular 4 that uses ng-template...which you are using here. The above code I mentioned is enough to break it.

eitanp461 commented 7 years ago

@bjornharvold https://codepen.io/eitanp461/project/editor/AObmaX/#0 is now working with Angular 2.4.10

Please let me know if it fits your needs

bjornharvold commented 7 years ago

Cheers @eitanp461. Apart from me using Angular CLI and using *ngFor to loop through my images, it's exactly the same. It wasn't until I removed the "responsive" attribute that it started working again. Any ideas?

eitanp461 commented 7 years ago

@bjornharvold I'm not sure I follow. Is it working for you now with the responsive attribute? The difference might be npm dependencies. Can you list them?

bjornharvold commented 7 years ago

Here you go:

"@angular/common": "2.4.10", "@angular/compiler": "2.4.10", "@angular/core": "2.4.10", "@angular/forms": "2.4.10", "@angular/http": "2.4.10", "@angular/platform-browser": "2.4.10", "@angular/platform-browser-dynamic": "2.4.10", "@angular/platform-server": "2.4.10", "@angular/router": "3.4.10", "@cloudinary/angular": "^2.1.1", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.24", "@nglibs/meta": "^0.2.0-rc.5", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", "angular2-moment": "^1.0.0", "bootstrap": "^4.0.0-alpha.6", "bootstrap-social": "^5.1.1", "cloudinary-core": "^2.3.0", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ionicons": "^3.0.0", "lodash": "^4.17.4", "moment": "^2.17.1", "ng2-page-scroll": "4.0.0-beta.6", "ng2-responsive": "^0.8.3", "ngx-sharebuttons": "^2.1.2", "ng2-validators": "~2.2.0", "rxjs": "^5.3.0", "ts-helpers": "^1.1.1", "zone.js": "^0.8.9"

eitanp461 commented 7 years ago

Is it working with the responsive attribute now?

eitanp461 commented 7 years ago

BTW setting an image as responsive also requires setting its width to auto, otherwise the image size is constant

eitanp461 commented 7 years ago

I updated the codepen to exactly match your HTML. It's still working.

bjornharvold commented 7 years ago

Thanks @eitanp461 It's not working for me somehow. I will look at this again when I can upgrade ng-bootstrap to latest, Angular 4 and the new Cloudinary Angular 4 supported plugin. For now I just removed 'responsive'.

eitanp461 commented 7 years ago

@bjornharvold Is this working since the upgrade to our latest release which supports Angular4?

bjornharvold commented 7 years ago

Still the same problem w TemplateRef not being found the moment I put "responsive" in there. Have had no time to look at it in more detail. Using the latest version of Ng-Bootstrap as well.

On May 28, 2017 at 15:38:11, Eitan Peer (notifications@github.com) wrote:

@bjornharvold https://github.com/bjornharvold Is this working since the upgrade to our latest release which supports Angular4?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cloudinary/cloudinary_angular/issues/85#issuecomment-304500757, or mute the thread https://github.com/notifications/unsubscribe-auth/AAnK_xkJE9cbP1Mkrj-5wFruh85VSMd5ks5r-TJzgaJpZM4NSoeK .

eitanp461 commented 7 years ago

@bjornharvold I created a glitch with the working example (so we can use package.json) - https://glitch.com/edit/#!/cloudinary-angular-carousel

Can you please remix it and create a case that reproduces the problem you see?

bjornharvold commented 7 years ago

Yes, will take a look

bjornharvold commented 7 years ago

Hi @eitanp461

I was playing around with package.json without any luck. What about if the images are remotely fetched... just to add to the complexity slightly. Meaning, you need to to get the IDs from someplace else before you are able to put them in the array you have there.

eitanp461 commented 7 years ago

@bjornharvold The example still works when loading the ids lazily, see updated glitch - https://glitch.com/edit/#!/cloudinary-angular-carousel

Can you create a reproduction of your case we can examine?

bjornharvold commented 7 years ago

This is a non-issue. Opening up a new ticket. I found the problem.

New issue here: https://github.com/cloudinary/cloudinary_angular/issues/88