Including and Calling a Custom JS Script in Angular 9

Question

I want to use a custom floating button in my angular 9 project. I have added the custom scripts.js file in angular.json file, below is how the structure looks.

"scripts": [
               "src/assets/js/custom/action-panel.js",
               "src/assets/js/custom/scripts.js",
           ]

below is the code in scripts.js file

$(document).ready(function() 
  {
      $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } );
  });

below is the code i'm using in the html file

<div class="st-actionContainer right-bottom">
<div class="st-panel">
    <div class="st-panel-header"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div>
    <div class="st-panel-contents">
        Put menu or icon links here!<br /><br />
        Or make a grid:
    </div>
    <div class="grid">
            <a href="#" class="gridChild"><i class="fa fa-cubes" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-database" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-send" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-tag" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-trophy" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-user" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-file" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-table" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-eject" aria-hidden="true"></i></a>
        </div>
</div>
<div class="st-btn-container right-bottom">
    <div class="st-button-main"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>

Reference of the script file: https://www.jqueryscript.net/menu/Material-style-Floating-Button-Panel-Plugin-For-jQuery-st-action-panel.html

I'm following the above practise. My floating button doesn't respond on click, out of nowhere sometimes the floating button work but rest of the time it doesn't. Could anybody let me know where am i going wrong

WorksLikeACharm · Accepted Answer · 2020-02-27 07:35:35Z

1

You have a racing condition. Test it like this:

$(document).ready(function() 
  {
      alert($('.st-actionContainer')); // to check during debugging wether that button is already in the DOM
      $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } );
  });

Make sure

 $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300  );

is called after

<div class="st-actionContainer right-bottom">

has been loaded into the DOM. (e.g. use ngAfterViewInit)

In General jQuery and Angular don´t make for a great combination because of 2 fundamental different ways of approaching a web application.

edited Feb 27, 2020 at 7:35

answered Feb 27, 2020 at 6:48

WorksLikeACharm

4141 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Akshay Shrivastav Over a year ago

Just got to know one more thing, if i open a new tab and modify the code, the tab reloads, without having a focus on it, but then only one time the alert appears, if i click on it the button works, but if all this thing is done with the focus window, it doesn't work.

Akshay Shrivastav Over a year ago

On click it does not display anything but when the page is reloaded it shows [object] [object] and displays it 3 to 4 times

WorksLikeACharm Over a year ago

I suggest calling $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 ); in ngAfterViewInit() of yourComponent.ts

Akshay Shrivastav Over a year ago

i did this ngOnInit(){ $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 ); } but while compiling throws an error Property 'launchBtn' does not exist on type 'JQuery<HTMLElement>'.

Collectives™ on Stack Overflow

Including and Calling a Custom JS Script in Angular 9

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related