Adding an external JS file to Angular 5 CLI

Donnie Ashok

I have this just one Javascript function:

function sidemodalclose() {
    $("#sidemodal").modal('hide');
    var date = new Date();
    date.setDate(date.getDate() + 1);
    document.cookie = "visited=yes; path=/; expires=" + date.toUTCString();
    console.log(document.cookie);
}

which I want to add to the home component of an Angular app.

As my home.component.ts has some jQuery functions which need to access the sidemodalclose() function.

import { Component, OnInit } from '@angular/core';

declare var $:any;

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

    constructor() { }

    ngOnInit() {

        $("#no-thanks").click(function() {
            sidemodalclose();
        });

        if (document.cookie.indexOf("visited") == -1) {
            setTimeout(function() {
                $("#sidemodal").modal('show');
            }, 1000)
        }

        $("#submit3").click(function() {
            $("#submit3").html("Just a sec!");
            $.post("https://thirdparty.com/api.php", $("#contact3").serialize(), function(response) {
                $("#submit3").html(response);
            });
            return false;
        });
    }

}

My question is what is the best way to include the small JS function in the app?

  1. Is it possible to add JS functions inline in .ts?

  2. If I import the JS file with import { SideModal } from '../../assets/js/sidemodal.js'; why does it say but '--allowJs' is not set.?

  3. What is the best practice to include custom JS functions in Angular typescript file?

Any insight is welcome. Thanks.

Nour

If you can declare your function inside your component, all your problems is solved. You can use like any other function of your component using this

If you can not, so the best way is to add it to your .angular-cli.json file under the tag scripts so the cli load it for your before your app bundle get loaded.

And to use it in your type script you should search for Definition Type under @Types or write your own type file.

Once your type is available:

import {sidemodalclose} from 'your-type';

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Angular 5: adding types to external JS file

From Dev

Call a function of external js file in angular 5 component

From Dev

How to include external JS file to angular5?

From Dev

How can I add external JS file in Angular CLI component, specific to the component only?

From Javascript

Angular Cli Webpack, How to add or bundle external js files?

From Javascript

Angular Cli Webpack, How to add or bundle external js files?

From Dev

Importing external JS Library to Angular 2 CLI @NgModule

From Javascript

Angular 2: import external js file into component

From Dev

Include External js file to angular 5.0.0 project

From Dev

Using external js file in angular 6 component

From Dev

External .js file in an Angular 8 project

From Dev

How to load external JS file in component using ember-cli

From Dev

Adding fontello in angular cli

From Dev

adding external js in gwt

From Dev

Angular 6 - call Angular function from external js file

From Dev

Call external js file function in Angular js controller

From Dev

Angular 5 : Load external CSS file - Not allowed to load local resource

From Dev

Completely external constants in Angular 5 using some configuration file

From Java

Adding external .jar file in Eclipse

From Dev

Adding external javascript file in javascript

From Dev

adding googlemaps to angular-cli

From Dev

How to link an external .otf file in p5.js

From Dev

Angular2 AOT Compilation with static external js file

From Dev

Filter module from external html file on Angular JS

From Dev

Angular not loading external js files giving Error: ENOENT: no such file or directory

From Dev

angular 2 referencing external js file in index.html

From Dev

Import external js File in Angular 4 and access functions and variables

From Dev

Calling a method in an angular Component from an external JS file

From Dev

[Angular]How to declare a function inside a button which is in external JS file

Related Related

  1. 1

    Angular 5: adding types to external JS file

  2. 2

    Call a function of external js file in angular 5 component

  3. 3

    How to include external JS file to angular5?

  4. 4

    How can I add external JS file in Angular CLI component, specific to the component only?

  5. 5

    Angular Cli Webpack, How to add or bundle external js files?

  6. 6

    Angular Cli Webpack, How to add or bundle external js files?

  7. 7

    Importing external JS Library to Angular 2 CLI @NgModule

  8. 8

    Angular 2: import external js file into component

  9. 9

    Include External js file to angular 5.0.0 project

  10. 10

    Using external js file in angular 6 component

  11. 11

    External .js file in an Angular 8 project

  12. 12

    How to load external JS file in component using ember-cli

  13. 13

    Adding fontello in angular cli

  14. 14

    adding external js in gwt

  15. 15

    Angular 6 - call Angular function from external js file

  16. 16

    Call external js file function in Angular js controller

  17. 17

    Angular 5 : Load external CSS file - Not allowed to load local resource

  18. 18

    Completely external constants in Angular 5 using some configuration file

  19. 19

    Adding external .jar file in Eclipse

  20. 20

    Adding external javascript file in javascript

  21. 21

    adding googlemaps to angular-cli

  22. 22

    How to link an external .otf file in p5.js

  23. 23

    Angular2 AOT Compilation with static external js file

  24. 24

    Filter module from external html file on Angular JS

  25. 25

    Angular not loading external js files giving Error: ENOENT: no such file or directory

  26. 26

    angular 2 referencing external js file in index.html

  27. 27

    Import external js File in Angular 4 and access functions and variables

  28. 28

    Calling a method in an angular Component from an external JS file

  29. 29

    [Angular]How to declare a function inside a button which is in external JS file

HotTag

Archive