Angular 6 Bootstrap Affix

Question

I'm trying to do affix or scrollspy functionality of Bootstrap 4 on Angular 6. However, I trying to find existing libraries. I found this one JonnyBGod's scrollspy but unfortunately, it is still on Angular 5 and also using the rxjs 5. Are there any existing libraries out there that are already using RxJS 6. can you guys recommend?

BTW, I am trying to at least make JonnyBGod's library work with angular 6 by using the rxjs's migration guide. But if anyone knows any library out there that is natively written using angular 6 it is very much appreciated.

Answer 1

You can use thisissoon's angular-scrollspy. I have used it in my angular 6 project, it's working perfectly fine.

Below are the steps to set it up

Step 1: Install

npm i @thisissoon/{angular-scrollspy,angular-inviewport} --save

Step 2: Import in app.module.ts

import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
import { ScrollSpyModule } from '@thisissoon/angular-scrollspy';

// Provide window object for browser and a suitable replacement
// on other platforms
const getWindow = () => window;
const providers: Provider[] = [{ provide: WindowRef, useFactory: getWindow }];

@NgModule({
  imports: [InViewportModule.forRoot(providers), ScrollSpyModule.forRoot()]
})
export class AppModule {}

Step 3: Add it in your component (example navbar.component.ts)

<ul role="navigation" snScrollSpy id="foo">
  <li><a snScrollSpyItem for="foo" href="#home">Home</a></li>
  <li><a snScrollSpyItem for="foo" href="#about">About Us</a></li>
  <li><a snScrollSpyItem for="foo" href="#team">Team</a></li>
  <li><a snScrollSpyItem for="foo" href="#contact">Contact</a></li>
</ul>

 <sn-scroll-spy-section id="home" for="foo">
      Home Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="about" for="foo">
      About Us Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="team" for="foo">
      Team Content
 </sn-scroll-spy-section>
 <sn-scroll-spy-section id="contact" for="foo">
    Contact Us content
 </sn-scroll-spy-section>

PS: This is also working if each section is inside a separate(nested) components.