CODEWITHSUNDEEP
jqueryangularionic-frameworkionic3
Ka Tech
Ka Tech

Reputation: 9457

Trouble Implementing Jquery code in Ionic and Angular

I am using Ionic 3/Anuglar 5 am trying to setup a floating horizontal scroll bar for a very tall table in a component . I have come across this solution which should work nicely. Floating horizontal scroll bar for html table

http://jsfiddle.net/cowboy/45rEs/show/

The issue I have is I don't know how to or exactly where to implement the following code into my component:

$('.your-div').floatingScrollbar();

So far I have imported the js plugin into my index:

<script src="assets/jquery.ba-floatingscrollbar.min.js"></script>

I just don't know what to do in my component?

import { Component } from '@angular/core';
@Component({
  selector: 'tall-table',
  templateUrl: 'tall-table.html'
})
export class TallTableComponent {

  constructor() {
  }

  /*
  ** name: Ng On Init
  ** desc: 
  */
  ngOnInit(): void { 
  }

  /*
  ** name: Destroy
  ** desc: Unsubscribe
  */
  ngOnDestroy(): void {
  }

}

tall-table.html

<div id="horz-scroll-wrapper" style="width: 300px; overflow: scroll">
    <div style="height: 100%;">
        <table class='sample'>
            <tbody>
                <tr *ngFor="let row of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]">
                    <td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td><td >abcdefghijklmnopqrstuvwxyz</td><td >ABCDEFGHIJKLMNOPQRSTUVWXYZ</td><td >1234567890</td><td >0987654321</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Upvotes: 0

Views: 64

Answers (1)

AKASH SHAH
AKASH SHAH

Reputation: 11

The first thing you will have to do is to setup the jQuery in your Angular project (if you have not done). To use jQuery with Angular, you will have to install jQuery using npm.

You can refer following links to setup jQuery in Angular project:

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

https://stackoverflow.com/a/44653848/4140916

Once you have completed that, you should put corresponding jQuery in ngAfterViewInit life-cycle hook and it should work then.

ngOnInit(): void { 
   $('.your-div').floatingScrollbar();
}

You can read more about life-cycle hooks here: https://angular.io/guide/lifecycle-hooks

If still it does not work, you should try some npm package for floating scrollbar (built specifically for Angular) like following one: https://www.npmjs.com/package/ngx-scrollbar

Upvotes: 1

Related Questions