[How-to] Jquery plugin - Add Swiped Carousel and other plugins

[zmnv]

Trying to use animation from inside of other functions in component by this.togglestates("goHide");. Tryed to use ViewEncapsulation.None also, or without it. No animation.

imports ...

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'layer-discount',
  templateUrl: './discount.component.html',
  animations: [
    trigger('visibilityChanged', [
      state('shown' , style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('* => *', animate('.4s'))
    ])
  ]
})

export class DiscountComponent implements OnInit { 

state: string ='show';

 togglestates(STATE) {
    if(STATE == 'goShow') {
      setTimeout(function(){
        this.state = 'show';
      }, 800);
    }
    if(STATE == 'goHide') {
      setTimeout(function(){
        this.state = 'hidden';
      }, 800);
    }
  }

}

html:

    <div [@visibilityChanged]="state">
      <h3>{{nigma.text}}</h3>
    </div>

[zmnv]

two weeks of my life was for nothing.

jquery sliders doesn't works because

    if(isBrowser) {
      $(document).ready(function(){

        $('.owl-carousel').owlCarousel();
      });
    }

compiler not understand owlCarousel and get error, stackoverflow solutions and other google is for usual Angular 2 ........ okay. try to works with typing, usual angular 2 works, webpack works, universal doesnt. there is no any tutorials...

angular 2 page slider doesnt work also because there is no support to 'divectives' in components...

i'm dead.

[MarkPieszak]

Animations should work (on the browser side at least), you're not talking about hitting F5 and it running the animations from the server-rendered view right? Because those won't get triggered.

Here's an example of basic animations here

As for jQuery, do you have it set up properly? I need to make sure I add the Gotcha to the seconds here & in the Universal repo. They're more up-to-date here

But to use jQuery, and jQuery plugins, it has to be setup differently:

The gist is, you need to import the plugin in your main-client.ts only, jQuery must be added as a Plugin for webpack so it's global, and you need to import * as $ from 'jquery'; at the top of your component to use jQuery in general within it. Then just wrap it in if (isBrowser) { $('.owl-carousel').owlCarousel(); } and that should do the trick!

---

How can I use jQuery and/or some jQuery plugins with Angular Universal?

Note: If at all possible, try to avoid using jQuery or libraries dependent on it, as there are better, more abstract ways of dealing with the DOM in Angular (2+) such as using the Renderer, etc. Yes, of course but there are a few things you need to setup before doing this. First, make sure jQuery is included in webpack vendor file, and that you have a webpack Plugin setup for it. new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

Now, make sure any "plugins" etc that you have, are only included in your main-client.ts file. (ie: import 'slick-carousel';) In a Component you want to use jQuery, make sure to import it near the top like so:

import * as $ from 'jquery'; Always make sure to wrap anything jQuery oriented in Universal's isBrowser conditional!

[zmnv]

@MarkPieszak

webpack.config.ts

export var commonPlugins = [
  ....
  new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })
];

client.ts

// the polyfills must be the first thing imported
import 'angular2-universal-polyfills';
import 'ts-helpers';
import './__workaround.browser'; // temporary until 2.1.1 things are patched in Core

import * as $ from 'jquery'
import 'owl.carousel';
...

carousel.component.ts

import { Component, OnInit } from '@angular/core';
import { isBrowser } from 'angular2-universal';

import * as $ from 'jquery';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'slider',
  templateUrl: './carousel.component.html',
})
export class CarouselComponent implements OnInit {
  ngOnInit() {
    if (isBrowser) { $('.owl-carousel').owlCarousel(); }
  }
}

Compiler returns **Property 'owlCarousel' does not exist on type 'JQuery'.**

Okay. Then I found folder typings and file index.d.ts inside. Add:

/// <reference path="globals/jquery/index.d.ts" />
interface JQuery {
  owlCarousel():void;
}

And there is no error in compiler. But in browser in console I see **EXCEPTION: $(...).owlCarousel is not a function**

I use pack of universal-starter master

[MarkPieszak]

Let me try and take a look tomorrow and see why it's not working, looks fine to me at least, hmm.

[zmnv]

@MarkPieszak no problem :) just try to include OwlCarousel2 in master pack of universal-starter. I still think I'm include owl wrong. Because there are so many contradictory information about how to fix that problems in internet. It would be nice if the developer of angular-universal tried to do it, and gave a particular fine example or repository. Because this is not only for owl, It's for all jQuery plugins as well.

Now I try to "carousel" with typescript functions and angular 2 animations. I had to use jquery because ng2-...-slider or other angular 2 components doesnt works ( or probably I'm stupid :) ) because of 'directives: [ ... ]'.

---

PS: however, jQuery works fine. $('.blabla').click() works. Also all scripts and .js plugins works if I include they in index.html as Githubissues.

Githubissues is a development platform for aggregating issues.