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>

Do you have corresponding IDs below this, like <div id="INITIATION"></div> ? — Robert
– Robert, Commented Aug 2, 2017 at 14:01

trungvose · Accepted Answer · 2017-09-14 05:57:53Z

6

+25

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;
}

answered Sep 14, 2017 at 5:57

trungvose

20.1k9 gold badges51 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

mast3rd3mon Over a year ago

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

trungvose Over a year ago

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.

mast3rd3mon Over a year ago

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

trungvose Over a year ago

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.

mast3rd3mon Over a year ago

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

|

Kapil Thakkar · Accepted Answer · 2018-03-07 06:40:51Z

-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/

answered Mar 7, 2018 at 6:40

Kapil Thakkar

87010 silver badges18 bronze badges

Collectives™ on Stack Overflow

Bootstrap 4 scrollspy not working with Angular 4

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related