Angular 2 execute script after template render

Question

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        lt reference path        typings main d ts    gt  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

User · Answer

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

User · Answer

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

User · Answer

ngAfterViewInit   of AppComponent is a lifecycle callback Angular calls after the root component and it s children have been rendered and it should fit for your purpose   See also https   angular io guide lifecycle-hooks

User · Answer

I ve used this method  reported here    export class AppComponent      constructor         if document getElementById  testScript          document getElementById  testScript   remove        var testScript   document createElement  script        testScript setAttribute  id    testScript        testScript setAttribute  src    assets js test js        document body appendChild testScript           it worked for me since I wanted to execute a javascript file AFTER THE COMPONENT RENDERED

[jquery] Angular 2 execute script after template render

Examples related to jquery

Examples related to angular

Examples related to typescript