# @thisissoon/angular-scrollspy

> A simple lightweight library for Angular which automatically updates links to indicate the currently active section in the viewport

Latest version **2.2.0** (published 2019-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @thisissoon/angular-scrollspy
pnpm add @thisissoon/angular-scrollspy
yarn add @thisissoon/angular-scrollspy
bun add @thisissoon/angular-scrollspy
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2019-02-05 |
| First published | 2017-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 8.9.0 |
| Dependencies | 1 |
| Unpacked size | 203 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Author | SOON_ |
| Maintainers | thisissoon |
| Keywords | angular, directive, scroll spy, scrollspy, bootstrap, navigation, nav, ngx-scrollspy, ngx-scroll-spy |

## Links

- npm: https://www.npmjs.com/package/@thisissoon/angular-scrollspy
- Repository: https://github.com/thisissoon/angular-scrollspy
- Homepage: https://github.com/thisissoon/angular-scrollspy#readme
- Issues: https://github.com/thisissoon/angular-scrollspy/issues
- npm.io page: https://npm.io/package/@thisissoon/angular-scrollspy

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2019-02-05
- 2.1.0 — 2018-11-22
- 2.0.0 — 2018-05-29
- 1.2.2 — 2018-02-19
- 1.2.1 — 2017-12-04
- 1.2.0 — 2017-11-30
- 1.2.0-rc.2 — 2017-11-30
- 1.2.0-rc.1 — 2017-11-30
- 1.2.0-rc.0 — 2017-11-30
- 1.1.0 — 2017-11-29
- 1.0.0 — 2017-08-31

## README

# Angular ScrollSpy

[![Build Status][circle-badge]][circle-badge-url]
[![Coverage Status][coveralls-badge]][coveralls-badge-url]
[![Commitizen friendly][commitizen-badge]][commitizen]
[![code style: prettier][prettier-badge]][prettier-badge-url]

A simple lightweight library for [Angular][angular] which automatically updates links to indicate the currently active section in the viewport. Requires [Angular Inviewport][angular-inviewport] to be installed as well.

This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).

## Install

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

`app.module.ts`

```ts
import { InViewportModule } from '@thisissoon/angular-inviewport';
import { ScrollSpyModule } from '@thisissoon/angular-scrollspy';

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

## Example

A working example can be found in the [src](https://github.com/thisissoon/angular-scrollspy/tree/master/src) folder.

`app.component.html`

```html
<ul role="navigation" snScrollSpy id="foo">
  <li><a snScrollSpyItem for="foo" href="#section1">Section 1</a></li>
  <li><a snScrollSpyItem for="foo" href="#section2">Section 2</a></li>
  <li><a snScrollSpyItem for="foo" href="#section3">Section 3</a></li>
  <li><a snScrollSpyItem for="foo" href="#section4">Section 4</a></li>
</ul>

<sn-scroll-spy-section id="section1" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section2" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section3" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section4" for="foo">content goes here</sn-scroll-spy-section>
```

`app.component.css`

```css
a {
  color: blue;
  transition: color 0.2s ease-in-out;
}

a.active {
  color: darkblue;
}
```

## Browser Support

This library makes use of the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) which requires a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to work on some browsers.

### Install the polyfill

```bash
npm i intersection-observer
```

Or use yarn

```bash
yarn add intersection-observer
```

### Include the polyfill

Add this somewhere in your `src/polyfills.ts` file

```ts
import 'intersection-observer';
```

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Making Commits

This repo uses [Commitizen CLI][commitizen] and [Conventional Changelog][conventional-changelog] to create commits and generate changelogs. Instead of running `git commit` run `git cz` and follow the prompts. Changelogs will then be generated when creating new releases by running `npm run release`.

## Making Releases

Run `npm run release` to create a new release. This will use [Standard Version][standard-version] to create a new release. [Standard Version][standard-version] will generate / update the changelog based on commits generated using [Commitizen CLI][commitizen], update the version number following semantic versioning rules and then commit and tag the commit for the release. Simply run `git push --follow-tags origin master`.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

[circle-badge]: https://https://circleci.com/gh/thisissoon/angular-scrollspy.svg?style=sheild
[circle-badge-url]: https://https://circleci.com/gh/thisissoon/angular-scrollspy
[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-scrollspy/badge.svg?branch=master
[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-scrollspy?branch=master
[angular]: https://angular.io/
[angular-inviewport]: https://github.com/thisissoon/angular-inviewport/
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
[prettier-badge-url]: https://github.com/prettier/prettier
[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[standard-version]: https://github.com/conventional-changelog/standard-version

---
_Source: https://npm.io/package/@thisissoon/angular-scrollspy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._