Angular2 equivalent to $ document.ready ()

Question

A simple question, I hope.

I want to run a script when Angular2 is equivalent to $ document.ready (). What is the best way to achieve this?

I tried putting the script at the end of index.html , but as I found out, this will not work! I suppose it should be in some kind of component declaration?

Is it possible to start script loading from a .js file?

EDIT - Code:

I have the following js and css plugins introduced into my application (from the Foundry html theme ).

  <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> ... <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/flexslider.min.js"></script> ... <script src="js/scripts.js"></script> //This initiates all the plugins 

As already noted, scripts.js "launches" all of this and therefore needs to be run after Angular is ready. script.js

It worked:

 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 } 

Answer 1

You can fire the event in ngOnInit() your Angular root component and then listen to this event outside of Angular.

This is Dart code (I don't know TypeScript), but should not be translated

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

Answer 2

Copy response from Chris:

It worked:

 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 } 

Answer 3

I went with this solution, so I did not have to include my custom js code in a component other than the jQuery $ function . getScript .

Note. Has a dependency on jQuery. Therefore, you will need jQuery and jQuery templates.

I found this to be a good way to get around custom or vendor js files that don't have types available, since TypeScript doesn't yell at you when you start your application.

 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 In fact, in my script, 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 this causes the view to show the wrong position of the elements before the script loads.

 ngOnInit() { $.getScript('../js/mimity.js'); } 

Answer 4

To use jQuery inside Angular, declare only $ as follows: declare var $: any;

Answer 5

the accepted answer is not correct and there is no point in accepting it given the question

ngAfterViewInit will work when the DOM is ready

whine ngOnInit will work when the page component is just starting to be created

Answer 6

In your main.ts file, the boot after DOMContentLoaded, so angular will load when the 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', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); });