Configure Revolution Slider in Angular component

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,
      }
    });
  }
}

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,
      }
    });
  }
}