How to use bootstrap scrollspy on angular 7 project?

Question

I have transform basic html page with bootstrap scrollspy component and my nav doesn't work (no change when page scroll).

I have install bootstrap 4 with the command below :

npm install bootstrap

There is no change on page scroll or when i click on menu there is no "active" flag.

Can you help me ? Thanks :)

Answer 1

check the solution here using a directive for spyScroll. It listens to scroll event on the page and highlights the current section in view.

import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, HostListener } from '@angular/core';

@Directive({
    selector: '[scrollSpy]'
})
export class ScrollSpyDirective {
    @Input() public spiedTags = [];
    @Output() public sectionChange = new EventEmitter<string>();
    private currentSection: string;

    constructor(private _el: ElementRef) {}

    @HostListener('scroll', ['$event'])
    onScroll(event: any) {
        let currentSection: string;
        const children = this._el.nativeElement.children;
        const scrollTop = event.target.scrollTop;
        const parentOffset = event.target.offsetTop;
        for (let i = 0; i < children.length; i++) {
            const element = children[i];
            if (this.spiedTags.some(spiedTag => spiedTag === element.tagName)) {
                if ((element.offsetTop - parentOffset) <= scrollTop) {
                    currentSection = element.id;
                }
            }
        }
        if (currentSection !== this.currentSection) {
            this.currentSection = currentSection;
            this.sectionChange.emit(this.currentSection);
        }
    }

}

In AppComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  currentSection = 'section1';

  onSectionChange(sectionId: string) {
    this.currentSection = sectionId;
  }

  scrollTo(section) {
    document.querySelector('#' + section)
    .scrollIntoView();
  }
}

AppComponent.html:

 <h1>Current Section : [{{currentSection}}]</h1>


<h2>Menu</h2>
<div (click)="scrollTo('section1')" [ngClass]="{ 'current-section': currentSection === 'section1' }">Section 1 
</div>
<div (click)="scrollTo('section2')" [ngClass]="{ 'current-section': currentSection === 'section2' }">Section 2 
</div>
<div (click)="scrollTo('section3')" [ngClass]="{ 'current-section': currentSection === 'section3' }">Section 3
</div>
<div (click)="scrollTo('section4')" [ngClass]="{ 'current-section': currentSection === 'section4' }">Section 4 
</div>
<br/>


<div id="parentDiv" scrollSpy [spiedTags]="['DIV']" (sectionChange)="onSectionChange($event)" style="height:150px;overflow-y: scroll;">
  <div id="section1">
    <h2 style="margin:0">Section 1</h2>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section2">
    <h1>Section 2</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section3">
    <h1>Section 3</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
  <div id="section4">
    <h1>Section 4</h1>
    <lorem-ipsum></lorem-ipsum>
  </div>
</div>
<br/>

In app.component.css:

.current-section {
  background-color: cornflowerblue
}
.current-section::after { 
  content: "\039e";
  background-color: yellow; 
  color: red;

}