How to integrate cloud9carousel with Angular 2

[mayurbaldha]

Do we have Angular2 version of the same ?

[specious]

I'm not an expert on Angular 2 integration. If you try it, let us know!

[mayurbaldha]

@specious Jquery Dependency is necessary? is there a version without jquery?

[specious]

I'm curious to know if there are similar carousels based on other technologies. However, this one is a jQuery plugin at its very core.

[tdavincci]

I successfully used it in my angular 4 project, using the demo example. using this steps.

1. download the files (images, js, css) and place the assets folder

2. include the scripts in .angular-cli.json "scripts": [... "assets/js/lib/jquery.js", "assets/js/lib/jquery.reflection.js", "assets/js/lib/jquery.cloud9carousel.js" ]

3. create new component with angular cli: ng generate component components/cloud9carosel

4. your component/cloud9carosel.component.html

Please Select your Vehicle Type.

 

← →

    </footer>
  </div>

5. copy all the css from from the index.html to components/cloud9carosel.component.css
6. at components/cloud9carosel.component.ts declare const $; //for jquery to work

-copy and place the jquery from the index.html to OnInit(){...}

7. include the selector in your app.component.html or wherever you want to call it

[tdavincci]

I used it successfully with angular 4

[jeck5895]

I successfully added it in angular 9 with static images. the problem is when binding *ngFor it's not displaying properly.. <img *ngFor="let x of certificates; let i = index;" style="width: 384px; height: 238px;" class="cloud9-item" src="https://bit.ly/3b7iFm3" [alt]="'Item #'+i" />