CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
MCM
MCM

Reputation: 477

Run jQuery after Angular is done loading

I'm writing some code to slightly modify an existing website.

The existing website is built with Angular. My code is using jQuery, but I can use any JavaScript.

However, I cannot change the existing website. I cannot change the existing Angular scripts. I can change my one external script file that is a src on the site. My code is running after the Angular scripts and jQuery scripts have been loaded.

How can I have my jQuery code run after Angular is done rendering the DOM?

$(document).ready() fires to early.

I've never used Angular, but reading online, it looks like it should emit a $viewContentLoading event, however I have not been able to capture this event in my script.

Thanks,

Upvotes: 1

Views: 1767

Answers (2)

Buchi
Buchi

Reputation: 506

As of date:

Sample of Component

import { Component, OnInit, AfterViewInit } from '@angular/core';
declare const $: any;
declare const JQuery: any;
@Component({
  selector: 'app-jquery',
  templateUrl: './jquery.component.html',
  styleUrls: ['./jquery.component.scss']
})
export class JQueryComponent implements OnInit, AfterViewInit {
  constructor() { }
  ngAfterViewInit(): void {
    // Right way, view fully ready here
    console.log($); 
  }

  ngOnInit(): void {
    // Wrong, view not always fully ready here
    console.log(JQuery); 
  }

}

Explanation

  1. Download the jquery min css & js files to your public assets dir src/assets

  2. Add these CSS & JS JQuery files via the styles & scripts arrays respectively in the angular.json file.

  3. To test if jquery / $ is being added properly, you should not encounter any build error due to these changes, else resolve them all most likely due to missing required assets.

  4. Add #5 line below just after the last import of any component or service to access the $.

  5. declare const JQuery:any;

  6. Add the line below just after the last import of any component or service to access the JQuery.

However it is important to be aware of the angular component lifecycle

As most will try accessing $ / JQuery within the ngOnInit method most times which is called once and is best for initialization not ready state events.

  1. In components where you have to access $ / Jquery, you have to implement the AfterViewInit and override/implement the ngAfterViewInit() which is invoked immediately after Angular has completed the initialization of a component's view. It is invoked only once when the view is instantiated / ready to render.

Therefore you can consider writing any block of code that has to wait for $(document).ready() in the ngAfterViewInit method to ensure to implement AfterViewInit.

Upvotes: -1

SyntaxRules
SyntaxRules

Reputation: 2206

You are correct. You need to wait for the DOM to load before attempting to run any jQuery!

The easy- and unsafe- way to do it is to use $timeout in angualrjs. See the doc here.

$timeout(function() {
    //your jQuery code here
}, 50);

This is telling angualrJs to wait 50 milliseconds then execute whatever is inside the function. 50 milliseconds should be enough time- but you might have to increase it if your page loads slow.

There is a better way!

You should look into directives to avoid using jQuery.

Upvotes: 0

Related Questions