1

I need to get a single (changing) value from a jQuery Component into an Angular component. Background: There is a jQuery-Plugin (jquery.reel) used to display a oh-so-cool 360°-view. It's able to spit out after frameChange the current frame it is on. So far not so special.

Now I'm trying to get this value, whenever it changes into my Angular 5 Component (made with Angular CLI). The Markup for the jQuery-Plugin is in this component's Template. So far I tried to read it out via ngOnChange and Viewchilds (via a hidden input-field), two-way-binding and the last try I made was via Local Storage (jQuery pushes the frame-value into Local Storage, Angular has an Observable to ... observe this Local Storage value).

Result: DevTools say, the LocalStorage value is properly updated via jQuery, Angular is completely ignorant about this same field, as long as it is changed from the outside (the other way around it works just fine..)

Disclaimer: Of course I should never ever use jQuery in Angular and everything is totally horrible, but I hope there are some other bad people like me over here, who can perhaps help me out with this...

jQuery-Part:

$('#reel').bind('frameChange', function(ev) {
   $('#hiddenInput').val($('#reel').reel('frame')).trigger('change').trigger('blur');
   window.localStorage.setItem('ng2-webstorage|frame', $('#reel').reel('frame'));
});

Angular-Component:

    declare var jQuery: any;

    import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
    import {Marker} from '../../classes/marker';
    import {LocalStorage, LocalStorageService} from 'ngx-webstorage';

    @Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html'
})
export class OverviewComponent implements OnInit, AfterViewInit {

  markerCombustion: Marker[] = [...];

  @ViewChild('hiddenInput1') hiddenInput1: ElementRef;
  @LocalStorage('frame') public frame: number;
  frameRaw: any;

  constructor(private storage: LocalStorageService) {
  }

  ngOnInit() {
    this.storage.observe('frame')
      .subscribe((newValue) => {
        console.log(newValue);
      });
  }

  ngAfterViewInit() {
      jQuery(this.hiddenInput1.nativeElement).on('change', (e) => {
        this.frameRaw = this.getFrame();
        console.log('test');

        this.frame = this.storage.retrieve('frame');
      });
  }

  getFrame() {

  }

  updateLS() {
    this.storage.store('frame', 20);
  }
}
6
  • Possible duplicate of How to use jQuery in AngularJS
    – Liam
    Commented Jan 10, 2018 at 9:56
  • Angular 5..., but thanks.
    – cjung
    Commented Jan 10, 2018 at 9:58
  • Could you please post some code ? I know some tips about integrating JQuery with Angular, but without code, I can't do much to help you.
    – user4676340
    Commented Jan 10, 2018 at 10:00
  • 2
    Hello and welcome to Stack Overflow, please take a time to go through the welcome tour to know your way around here (and also to earn your first badge), read how to create a minimal reproducible example example and also check How to Ask so you increase your chances to get feedback and useful answers.
    – garfbradaz
    Commented Jan 10, 2018 at 10:03
  • That title though. Commented Jan 10, 2018 at 10:13

0