How to include and use jQuery in Angular CLI project

Tested in angular version 7:

  1. install jquery:
    npm install jquery
    install jquery typescript intellisense:
    npm install @types/jquery
  2. edit the angular.json file in root folder:
    in the architect / build / scripts location, add this:

    "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
  3. To use jquery inside a component.ts add this import at the top:
    import $ from ‘jquery’;

    Example code to check for functionality:
    component html:

    <button (click)="testJQuery()">Test jquery</button>
    testJQuery() {
    Click on the button should fade out and fade in the entire page.

Source: How to include and use jQuery in Angular CLI project

Using Self Calling Anonymous Functions and $(document).ready

This is a common pattern with jQuery extensions to ensure that they are always added to the jQuery object, but can be written using $ to keep the code tidy:

      // your code here

The $ would actually reference the jQuery library inside while still referring to Prototype on the outside! This can help tidy up your code

Source: javascript – Using Self Calling Anonymous Functions and $(document).ready – Stack Overflow

Using jQuery to prevent Internet Explorer from accidentally submitting form on enter key

$(function () {
    //page is ready
		//Prevents users from accidentally submitting form with enter key (e.g. IE problem) 
	    $(document).on("keyup keypress", "form input[type='text']", function (e) {
	        if (e.keyCode === 13 /*enterkey*/ || event.keyCode === 169 /*enter on numpad*/) {
	            return false;

Works in ajax templated context as well.

jquery – Fade in each element – one after another – Stack Overflow

Let’s say you have an array of span elements:

$("span").each(function(index) {

(quick note: I think you need jQuery 1.4 or higher to use the .delay method)

This would basically wait a set amount of time and fade each element in. This works because you’re multiplying the time to wait by the index of the element. The delays would look something like this when iterating through the array:

Delay 400*0 (no delay, just fadeIn, which is what we want for the very first element)

Delay 400*1

Delay 400*2

Delay 400*3

This makes a nice “one after the other” fadeIn effect. It could also be used with slideDown. Hope this helps!

via jquery – Fade in each element – one after another – Stack Overflow.

Short js snippets working with js jquery and bool valuesinput checkboxes

Get value of checkbox (jquery):


– returns bool true or bool false

Set value of checkbox (jquery):

$('#myCheckboxInput').attr('checked', true)

Second parameter can be true or false.

Convert true or false strings to bool (js):

var myBoolValue = (myString.toLowerCase() === "true");

This is when you know the string will be ‘True’ or ‘FALSE’ for instance. Accepts all case variations of ‘TRUE’ and ‘false’.