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