Setting up the Revolution Slider within an Angular component

Currently, I am utilizing a template that I purchased from Theme Forest as the foundation for an angular application.

My goal is to transform these template parts into components.

However, I am facing difficulties in getting a Revolution slider to work.

Within the template HTML, the slider is set up 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>

When approaching a similar task in Angular, the OnInit lifecycle hook is typically used.

I have imported jQuery and captured the DOM element successfully.

The main obstacle lies in obtaining a reference to the Revolution library.

Whenever I try to use the following code in Angular, I encounter a compile-time error stating: "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,
      }
    });
  }
}
angulartypescriptrevolution-slider

Answer №1

Kindly consider utilizing the AfterViewInit hook instead of OnInit as illustrated 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,
                }
            });
        }
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for emptying the search field in primeng multiselect widget

Is it possible to reset the search input field in primeng multiselect? I've been referring to the tutorial on primeng multiselect provided in the following article. https://www.primefaces.org/primeng/showcase/#/multiselect https://i.stack.imgur.com ...

angularprimeng

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

javascriptangular

The retrieved item has not been linked to the React state

After successfully fetching data on an object, I am attempting to assign it to the state variable movie. However, when I log it to the console, it shows as undefined. import React, {useState, useEffect} from "react"; import Topbar from '../H ...

javascriptreactjstypescriptfetch-api

The properties in Typescript, specifically 'value', are not compatible with each other

I've encountered an error while working on a TypeScript project with React Context. The error message states: Argument of type 'Context<{}>' is not assignable to parameter of type 'Context<IsProductContext>'. The type ...

reactjstypescript

Incorrect Date Range Picker Alignment

I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...

htmlangularangular-daterangepicker

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

I am currently working on an Angular Image Carousel that utilizes a model to iterate through the images. However, I am encountering an error when attempting to access the first position. An error message stating "The left-hand side of an assignment expres ...

angulartypescriptangular-materialcarousel

Angular 6 and Bootstrap 4 unite in a powerful collaboration, showcasing a stunning carousel feature enhanced with dynamic

Currently I am working on creating a carousel using Bootstrap 4 and Angular 6. Everything is functioning properly, except for one issue that I am facing. I am trying to add Indicators dynamically by using a *ngFor loop. The problem I am encountering is tha ...

angularhtmlbootstrap-4

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

javascriptangularroutesangular-ui-router

The synergy between ternary operators and Vue filters

Recently, I came across a peculiar issue while working with Vue. Take a look at the code snippet from vue.html: <label :text= "$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`"> </lab ...

typescriptvue.js

Angular ngx-translate: Responding to language change event

Is it possible to detect the change in the "current language" using the ngx-translate library? Which JavaScript event should I use to accomplish this task? To clarify, please refer to this straightforward example: https://stackblitz.com/edit/github-yvbmgu ...

angulartypescriptangular-componentsngx-translateangular13

Manipulate md-select options with Angular using setValue

My goal is to update a select option, but I'm having trouble getting it to work properly. When I use this.eventForm.controls.venue.setValue(event.venue.name);, the value of venue changes to match event.venue.name. However, the select option itself doe ...

javascriptangular

Utilizing Angular Firestore in Combination with Await

Upon reviewing this response, I attempted to implement async/await with a firestore call but it seems like I may be overlooking something. The aim is to fetch a collection of 'hex' documents for a hex grid using Snapshot. Initially, I had valueC ...

angularfirebaseasync-awaitrxjsgoogle-cloud-firestore

Using ngModel to bind data within an Angular dialog box

I'm facing an issue with my project where changes made in the edit dialog are immediately reflected in the UI, even before saving. This causes a problem as any changes made and then canceled are still saved. I want the changes to take effect only afte ...

htmlangulartypescript

Getting the current browser window in the renderer within Electron 14: A step-by-step guide

Previously, I utilized the code below to retrieve the current window from the renderer: import {remote, BrowserWindow} from 'electron'; export function getCurrentWindow(): BrowserWindow { return remote.getCurrentWindow(); } With electron 14 ...

typescriptelectron

Severing Change Detection in Angular 4 Among Child Components

I'm having trouble understanding why the ngDoCheck function continues to be called even when I use ChangeDetectionStrategy.OnPush and changeDetectorRef.detach(). My app has a large number of components, and I want to prevent the change detection in ch ...

angularangular2-changedetection

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

cssangularangular-materialstyling

Return the previous value if the filter function returns false in RxJs

In an attempt to optimize performance and reduce unnecessary requests to the server, this code checks if values exist in the store before making additional requests. While the overall logic functions correctly, there is an issue where if the filter returns ...

angularrxjsngrxngrx-store

What is the best way to extract subscribed data from a function in Angular 2?

I'm currently working on a function that makes multiple API calls using for loops. My goal is to combine all the responses and return them once the last API call's data is received. Although I can successfully combine the data within the functio ...

angular

Using Typescript to create an interface that extends another interface and includes nested properties

Here is an example of an interface I am working with: export interface Module { name: string; data: any; structure: { icon: string; label: string; ... } } I am looking to extend this interface by adding new properties to the 'str ...

typescriptsyntax

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

javascriptcssreactjstypescriptreact-native