WeCodePixels / theia-sticky-sidebar

Glues your website's sidebars, making them permanently visible while scrolling.
MIT License
569 stars 209 forks source link

Can you please specify how to use it in Angular 4 #62

Open AbhijithRobosoft opened 5 years ago

AbhijithRobosoft commented 5 years ago

I tried installing the npm package and declaring it in the angular.json file but there is no changes as such. Is there anything I need to import in my component?

liviucmg commented 5 years ago

Not sure I can help you as I don't have that much experience with Angular, and this package does not have any Angular bindings.

AbhijithRobosoft commented 5 years ago

How come its not working in the example demos ?

egenita commented 2 years ago

It would highly appreciated if this works in Angular2 <

Maryamkhn commented 1 year ago

After many struggles, I finally managed to do it in angular!

For anyone who needs it, just follow these steps:

1- Install jquery and theia-sticky-sidebar using NPM: npm install jquery npm install theia-sticky-sidebar

2- Add the js scripts to angular.json file, at the script section: "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/theia-sticky-sidebar/dist/ResizeSensor.min.js", "./node_modules/theia-sticky-sidebar/dist/theia-sticky-sidebar.min.js" ]

3- At the first line of .ts file of the related component(the component that uses theia-sticky-sidebar) declare the jquery variable: declare var $: any;

4- In the .ts file of the related component(the component that uses theia-sticky-sidebar) add this script in ngoninit: ngOnInit() { $(document).ready(function () { $('.sidebar, .content').theiaStickySidebar({ additionalMarginTop: 30, }); }); }

5- Now you can enjoy theia-sticky-sidebar, just use HTML structure like this:

        <div class="wrapper">
          <div class="content">
            <div class="theiaStickySidebar">
            ...
            </div>
          </div>
          <div class="sidebar">
            <div class="theiaStickySidebar">
            ...
            </div>
          </div>
        </div>