So I have this slider component that use materializecss javascript. So after it's rendered, I need to execute
$(document).ready(function(){
$('body').on('Slider-Loaded',function(){
console.log('EVENT SLIDER LOADED');
$('.slider').slider({full_width: true});
$('.slider').hover(function () {
$(this).slider('pause');
}, function () {
$(this).slider('start')
});
});
});
But I don't quite knows where to put this line since typescript/angular remove script tag in templates. I've included JQuery in the ts files and was hoping to use the event system, but that doesn't seems to work. Any ideas? Here's the code of the ts file:
/// <reference path="../../typings/main.d.ts" />
import {Component, Input} from 'angular2/core';
import { RouterLink } from 'angular2/router';
import {ServerService} from './server';
@Component({
selector: 'slider',
templateUrl:'/app/template/slider.html',
directives: [ ],
})
export class SliderComponent {
@Input() images;
private server: ServerService;
public constructor(server: ServerService){
this.server = server;
}
ngOnInit() {
console.log("THROWING EVENT");
$('body').trigger('Slider-Loaded');
}
}
ngAfterViewInit() of AppComponent is a lifecycle callback Angular calls after the root component and its children have been rendered and it should fit for your purpose.
Actually ngAfterViewInit() will initiate only once when the component initiate.
If you really want a event triggers after the HTML element renter on the screen then you can use ngAfterViewChecked()
I have found that the best place is in NgAfterViewChecked(). I tried to execute code that would scroll to an ng-accordion panel when the page was loaded. I tried putting the code in NgAfterViewInit() but it did not work there (NPE). The problem was that the element had not been rendered yet. There is a problem with putting it in NgAfterViewChecked(). NgAfterViewChecked() is called several times as the page is rendered. Some calls are made before the element is rendered. This means a check for null may be required to guard the code from NPE. I am using Angular 8.