5

I am using a template purchased from Theme forest as the basis for an angular app.

I want to make these template parts into components.

Struggling to get a Revolution slider working.

In the template html - it wires up the the slider on the document ready event:

    <script>
  jQuery(document).ready(function() {

    jQuery("#rev_slider_280_1").show().revolution({
      sliderType: "hero",
      jsFileLocation: "revo-slider/js/",
      sliderLayout: "fullscreen",
      dottedOverlay: "none",
      delay: 9000,
      /*navigation: {},*/
      responsiveLevels: [1240, 1024, 778, 480],
      visibilityLevels: [1240, 1024, 778, 480],
      gridwidth: [1240, 1024, 778, 480],
      gridheight: [868, 768, 960, 720],
      lazyType: "none",
      parallax: {
        type: "off",
        origo: "slidercenter",
        speed: 1000,
        levels: [0],
        type: "scroll",
        disable_onmobile: "on"
      },
      shadow: 0,
      spinner: "spinner2",
      autoHeight: "off",
      fullScreenAutoWidth: "off",
      fullScreenAlignForce: "off",
      fullScreenOffsetContainer: "",
      fullScreenOffset: "",
      disableProgressBar: "on",
      hideThumbsOnMobile: "off",
      hideSliderAtLimit: 0,
      hideCaptionAtLimit: 0,
      hideAllCaptionAtLilmit: 0,
      debugMode: false,
      fallbacks: {
        simplifyAll: "off",
        disableFocusListener: false,
      }
    });

  }); /*ready*/
</script>

following a similar approach in Angular would use the OnInit lifecycle hook.

I have referenced jQuery and capture the DOM element.

The problem is the I do not know how to get a reference to the Revolution library.

I get a compile time error with this code (Property 'Revolution' does not exist on Jquery:

import {Component, ElementRef, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'pm-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pm';

  constructor(private element: ElementRef) {}

  ngOnInit(): void {

$(this.element.nativeElement).show().revolution({
  sliderType: "hero",
  jsFileLocation: "revo-slider/js/",
  sliderLayout: "fullscreen",
  dottedOverlay: "none",
  delay: 9000,
  /*navigation: {},*/
  responsiveLevels: [1240, 1024, 778, 480],
  visibilityLevels: [1240, 1024, 778, 480],
  gridwidth: [1240, 1024, 778, 480],
  gridheight: [868, 768, 960, 720],
  lazyType: "none",
  parallax: {
    type: "off",
    origo: "slidercenter",
    speed: 1000,
    levels: [0],
    type: "scroll",
    disable_onmobile: "on"
  },
  shadow: 0,
  spinner: "spinner2",
  autoHeight: "off",
  fullScreenAutoWidth: "off",
  fullScreenAlignForce: "off",
  fullScreenOffsetContainer: "",
  fullScreenOffset: "",
  disableProgressBar: "on",
  hideThumbsOnMobile: "off",
  hideSliderAtLimit: 0,
  hideCaptionAtLimit: 0,
  hideAllCaptionAtLilmit: 0,
  debugMode: false,
  fallbacks: {
    simplifyAll: "off",
    disableFocusListener: false,
      }
    });
  }
}

1 Answer 1

5

please use AfterViewInit hook instead of OnInit like below:

    import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
   selector: 'pm-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'pm';

constructor(private element: ElementRef) {}

ngAfterViewInit(): void {
   $(this.element.nativeElement).show().revolution({
      sliderType: "hero",
      jsFileLocation: "revo-slider/js/",
      sliderLayout: "fullscreen",
      dottedOverlay: "none",
      delay: 9000,
      /*navigation: {},*/
      responsiveLevels: [1240, 1024, 778, 480],
      visibilityLevels: [1240, 1024, 778, 480],
      gridwidth: [1240, 1024, 778, 480],
      gridheight: [868, 768, 960, 720],
      lazyType: "none",
      parallax: {
         type: "off",
         origo: "slidercenter",
         speed: 1000,
         levels: [0],
         type: "scroll",
         disable_onmobile: "on"
      },
      shadow: 0,
      spinner: "spinner2",
      autoHeight: "off",
      fullScreenAutoWidth: "off",
      fullScreenAlignForce: "off",
      fullScreenOffsetContainer: "",
      fullScreenOffset: "",
      disableProgressBar: "on",
      hideThumbsOnMobile: "off",
      hideSliderAtLimit: 0,
      hideCaptionAtLimit: 0,
      hideAllCaptionAtLilmit: 0,
      debugMode: false,
      fallbacks: {
         simplifyAll: "off",
         disableFocusListener: false,
      }
    });
  }
}
3
  • 1
    Thank you for the answer. Is it possible for you to post a stackblitz or plunker for your solution? If licenses allow. Commented May 17, 2019 at 9:13
  • 1
    im getting Property 'revolution' does not exist on type 'JQuery<any>' Commented Sep 17, 2019 at 10:38
  • 1
    stackoverflow.com/questions/34858533/… These answers explain and resolve this issue. Commented Jan 26, 2021 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.