Bootstrap 4 scrollspy not working with Angular 4

Question

I'm trying to implement scrollspy in Angular 4. I've imported jQuery and Bootstrap.js in .angular-cli.json file. Its not giving any error in the console. However active class is not getting applied to li element as expected.

https://v4-alpha.getbootstrap.com/components/scrollspy/

header.component.ts

ngOnInit() {
    $(document).ready(() => {
        $('body').scrollspy({target: "#myNavbar", offset: 50});   
    });
}

header.component.html

<div class="navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li><a href="#PATIENT IDENTIFICATION">Section 1</a></li>
    <li><a href="#INITIATION">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#section41">Section 4-1</a></li>
        <li><a href="#section42">Section 4-2</a></li>
      </ul>
    </li>
  </ul>
</div>

Massif

Do you have corresponding IDs below this, like <div id="INITIATION"></div> ? – Aldebaran

Yes its present. – Massif

Have you tried ngx-scrollspy ? – Hamfurd

Answer 1

It works in my case, still using ngOnInit. You can check the plukr on the below link.

http://embed.plnkr.co/JXujqbPCGXU47fccaEL6/

Please take note of.

1. Requires Bootstrap nav

Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links. So simply just grab a block of code from here will do.

2. Requires relative positioning

Add the position: relative; in your content where you are scrolling on. In my plunkr, I added it and the height to make the scroll basically.

.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}

Heartthrob

isnt there an angular2/4 way? without using jquery? – Chromate

It's not a really angular way but It is my response to the question because he is using the same approach but it didn't work. – Heartthrob

probably as it isnt angular? the $ is an angularjs feature yet he is asking about angular4 – Chromate

So if you're looking for an Angular 4 solution written without using jQuery and Bootstrap, there are a bunch of them on google that did it for you. If you want to reuse the scrollspy from Bootstrap then yes, we need jQuery because Boostrap requires jQuery to work. If you want an answer in Angular way with the custom directive, we also can help but it will look almost the same. – Heartthrob

I myself have tried several ways including 3 plugins that dont work – Chromate

Alright, I don't know how to write it in a very Angular way that didn't require $ to be used. Even written a custom directive like [scrollSpy], what I will do is just add the code $('.scrollspy-example').scrollspy({ target: '#navbar-example' }) into ngOnInit of the directive itself. Nothing much. If you decided to wait for another more proper answer, hope you can find it soon. I also want to see how people solve it as well. – Heartthrob

great, so i gave half the bounty away to an incorrect answer, stupid auto answer – Chromate

If you have any more idea, please raise in the stack meta. But for now, it works like that. I can give another bounty to this question if you still want a proper answer. – Heartthrob

but it doesnt work using your code, and im more annoyed that it gave the bounty away despite not being a correct answer – Chromate

Let me double check. My code didn't work or it works but it is not something you're expected? I thought this is just not a proper way to do it, but it works. – Heartthrob

I ended up removing it but it didnt work, it never caught the scrollspy so never had active or anything – Chromate

If that is the case, just tell me earlier. Would you mind to create a plunkr? Did you try my plunkr, because I only try and saw it works in plunkr then it should work in local as well. – Heartthrob

Answer 2

In angular we can do using fragment but some how its not working. For now we can use old method with angular.

<div class="row">
 <div class="col-md-8">
  <div id="anyId1">
  .
  .
  .
  .
  </div>
  <div id="anyId2">
  .
  .
  .
  .
  </div>
 </div>
 <div class="col-md-4">
    <a href="/componentPath#anyId1"> 1 </a>
    <a href="/componentPath#anyId2"> 2 </a>
 </div>
<div>

it wont reload page so NO DATA LOSS (if any input fields)

Example: http://embed.plnkr.co/9ayZcAceHfL5jVz83Hk9/

Floss