Angular2 equivalent of document ready

Question

Simple question  I hope   I want to run a script when the Angular2 equivalent of  document ready   is fired  What is the best way to achieve this   I ve tried putting the script at the end of index html  but as I found out  this doesn t work  I take it that it has to go in some kind of component declaration   Is it possible to run load the script from a  js file   EDIT - Code   I ve got the following js and css plugins injected into my application  from the Foundry html theme         lt link href  css themify-icons css  rel  stylesheet  type  text css  media  all    gt       lt link href  css bootstrap css  rel  stylesheet  type  text css  media  all    gt                 lt script src  js jquery min js  gt  lt  script gt       lt script src  js bootstrap min js  gt  lt  script gt       lt script src  js flexslider min js  gt  lt  script gt               lt script src  js scripts js  gt  lt  script gt    This initiates all the plugins   As noted  the scripts js  instantiates  the whole thing  and thus is needed to be run after Angular is ready  script js  Got it working   import  Component  AfterViewInit  from  angular2 core     Component     selector   home     templateUrl     components home home html     export class HomeCmp implements AfterViewInit         ngAfterViewInit              Copy in all the js code from the script js  Typescript will complain but it works just fine

User · Answer

In order to use jQuery inside Angular only declare the   as following   declare var    any

User · Answer

You can fire an event yourself in ngOnInit   of your Angular root component and then listen for this event outside of Angular   This is Dart code  I don t know TypeScript  but should t be to hard to translate   Component selector   app-element    View      templateUrl   app element html     class AppElement implements OnInit     ElementRef elementRef    AppElement this elementRef      void ngOnInit         DOM dispatchEvent elementRef nativeElement  new CustomEvent  angular-ready

User · Answer

I went with this solution so I didn t have to include my custom js code within the component other than the jQuery   getScript function       Note  Has a dependency on jQuery  So you will need jQuery and jQuery typings    I have found this is a good way to get around custom or vendor js files that do not have typings available that way TypeScript doesn t scream at you when you go to start your app   import   Component AfterViewInit  from   angular core    Component     selector   ssContent     templateUrl   app content content html      export class ContentComponent implements AfterViewInit       ngAfterViewInit          getScript     js myjsfile js            Update Actually in my scenario the OnInit lifecycle event worked better because it prevented the script from loading after the views were loaded  which was the case with ngAfterViewInit  and that cause the view to show incorrect element positions prior to the script loading   ngOnInit           getScript     js mimity js

User · Answer

In your main ts file bootstrap after  DOMContentLoaded so angular will load when DOM is fully loaded   import   enableProdMode   from   angular core   import   platformBrowserDynamic   from   angular platform-browser-dynamic    import   AppModule   from    app app module   import   environment   from    environments environment    if  environment production      enableProdMode         document addEventListener  DOMContentLoaded        gt      platformBrowserDynamic   bootstrapModule AppModule     catch err   gt  console log err

User · Answer

Copying the answer from Chris   Got it working   import  AfterViewInit  from  angular2 core        export class HomeCmp implements AfterViewInit            ngAfterViewInit              Copy in all the js code from the script js  Typescript will complain but it works just fine

User · Answer

the accepted answer is not correct  and it makes no sens to accept it considering the question  ngAfterViewInit will trigger when the DOM is ready  whine ngOnInit will trigger when the page component is only starting to be created

[angular] Angular2 equivalent of $document.ready()

Examples related to angular