11

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>
Salim Ibrogimov
  • 1,334
  • 2
  • 14
  • 32
Rahul Dagli
  • 3,613
  • 11
  • 40
  • 77

2 Answers2

7

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;
}
trungk18
  • 18,147
  • 6
  • 41
  • 69
  • isnt there an angular2/4 way? without using jquery? – mast3rd3mon Sep 14 '17 at 07:55
  • 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. – trungk18 Sep 14 '17 at 08:02
  • probably as it isnt angular? the `$` is an angularjs feature yet he is asking about angular4 – mast3rd3mon Sep 14 '17 at 08:23
  • 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. – trungk18 Sep 14 '17 at 08:28
  • I myself have tried several ways including 3 plugins that dont work – mast3rd3mon Sep 14 '17 at 08:33
  • 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. – trungk18 Sep 14 '17 at 08:42
  • great, so i gave half the bounty away to an incorrect answer, stupid auto answer – mast3rd3mon Sep 21 '17 at 10:38
  • 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. – trungk18 Sep 21 '17 at 15:20
  • but it doesnt work using your code, and im more annoyed that it gave the bounty away despite not being a correct answer – mast3rd3mon Sep 22 '17 at 08:39
  • 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. – trungk18 Sep 22 '17 at 08:41
  • I ended up removing it but it didnt work, it never caught the scrollspy so never had active or anything – mast3rd3mon Sep 22 '17 at 09:03
  • 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. – trungk18 Sep 22 '17 at 09:05
-1

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/

Kapil Thakkar
  • 727
  • 8
  • 16