Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AbhijithRobosoft opened this issue Jan 22, 2019 · 4 comments
Open

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

AbhijithRobosoft opened this issue Jan 22, 2019 · 4 comments
Labels

Comments

@AbhijithRobosoft
Copy link

AbhijithRobosoft commented Jan 22, 2019

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
Copy link
Member

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
Copy link
Author

How come its not working in the example demos ?

@egenita
Copy link

egenita commented Oct 11, 2021

It would highly appreciated if this works in Angular2 <

@Maryamkhn
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants