angular-contents

Angular Contents

Angular Table of Contents that follow you while you scroll down.

Demo

zurfyx.github.io/angular-contents

Install

npm install angular-contents

Getting started

my-module.module.ts

import { ContentsModule } from 'angular-contents';

@NgModule({
  imports: [
    ...
    ContentsModule,
    ...
  ],

my-module.component.ts

∅

my-module.component.html

<div class="columnify" contents>
  <!-- Body -->
  <div>
    <div [contentsSection]="'section-one'">
      <h1>Section One</h1>
      ...
    </div>

    <div [contentsSection]="'section-two'">
      <h1>Section Two</h1>
      ...
    </div>
  <!-- Table of Contents -->
  <div class="table-column">
    <ul class="contents-table" contentsTable>
      <li><a href="#section-one" contentsLink>Section One</a></li>
      <li><a href="#section-two" contentsLink>Section Two</a></li>
    </ul>
  </div>
</div>

* class names can be freely renamed. Just make sure to adjust the CSS classes later accordingly.

my-module.component.css

Below are the styles that the Angular Contents demo page uses. Only the <-- must have fields are required. Feel free to adjust the rest to your website style.

The snippet above displays the Angular Contents specific styles, you can find the full page styles here.

.contents-table {
  // Do not use margin here. It will be overwritten.
  position: absolute; // <-- must have.
  padding: 2rem;
}

.contents-table.sticky {
  position: fixed; // <-- must have.
  top: 0; // <-- must have.
}

.contents-table {
  list-style: none;
  margin: 0;
}

.contents-table a {
  border-radius: 4px;
  display: block;
  padding: 0.3rem 0.6rem;
  color: #444;
  text-decoration: none;
}

.contents-table a.active {
  background-color: #000;
  color: #fff;
}

.columnify > .table-column {
  flex: 0 1 auto;
  width: 220px;
}

// Columnify https://stackoverflow.com/a/47220287
.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

Scroll animation

By default, Angular Contents carries no animation. Feel free to choose a scrolling library of your choice.

The demo page uses ngx-page-scroll. Attaching it to Angular Contents is as simple as it follows.

Install the library

npm install ngx-page-scroll

Import the library into your Module

import { ContentsModule } from 'angular-contents';
import { NgxPageScrollModule } from 'ngx-page-scroll';

  imports: [
    ...
    ContentsModule,
    NgxPageScrollModule,
    ...
  ],

Add functionality to your Component HTML

<ul class="contents-table" contentsTable>
  <li><a href="#section-one" contentsLink pageScroll>Section One</a></li>
  <li><a href="#section-two" contentsLink pageScroll>Section Two</a></li>
  <li><a href="#section-three" contentsLink pageScroll>Section Three</a></li>
  <li><a href="#section-four" contentsLink pageScroll>Section Four</a></li>
  <li><a href="#section-five" contentsLink pageScroll>Section Five</a></li>
</ul>

Notice pageScroll addition.

For further ngx-page-scroll configuration, such as scroll speed, you should check their own repository.

[Advanced] Scrolling view

By default, Angular Contents will use the window or document as the scrolling view. That means that the inner content will update according to the changes in such elements.

More technically, the scrolling view is the one that triggers scrolling events and from which the relative offset is measured. If the scrolling view is set to a div instead, only once the div gets scrolled the Table of Contents will trigger an update.

By using the special binding [scrollingView], you can set the scrolling container of your choice instead of the default one.

Below we present the source code of the one that is working in the demo, once you switch to the "Scroll View". You can check the full source code by clicking on the file names.

my-module.module.ts

Same as default.

my-module.component.ts

import { Component, ViewEncapsulation, ViewChild, ElementRef, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { PageScrollService, PageScrollInstance } from 'ngx-page-scroll';

@Component({
  selector: 'app-scrolling-view',
  templateUrl: 'scrolling-view.component.html',
  styleUrls: ['scrolling-view.component.scss'],
})
export class ScrollingViewComponent {
  @ViewChild('container') private container: ElementRef;

  constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {}

  public animateScroll(sectionTarget: string): void {
    // https://github.com/Nolanus/ngx-page-scroll#service
    const pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({
      document: this.document, scrollTarget: sectionTarget, scrollingViews: [this.container.nativeElement]
    });
    this.pageScrollService.start(pageScrollInstance);
  }
}

The scrolling animation, just like by default can also be done with ngx-page-scroll. In fact, that's why it was initially requested and the reason why we try to stick to their names.

To set scrolling transition effects with ngx-page-scroll, you have to do something like above, where we wrote our own animateScroll to handle each of the Table of Contents links click. You can find more details about the PageScrollInstance and their service in their own repository.

Angular Contents as such does only require the declaration of the container that you are going to be using as the scrolling view: @ViewChild('container') private container: ElementRef;

my-module.component.html

<div class="columnify" contents [scrollingView]="container"> <!-- We use the container referenced below -->
  <!-- Body -->
  <div class="framed" #container> <!-- Notice the #container -->
    <div [contentsSection]="'section-one'">
      <h1>Section One</h1>
      ...
    </div>

    <div [contentsSection]="'section-two'">
      <h1>Section Two</h1>
      ...
    </div>
  <!-- Table of Contents -->
  <div class="table-column">
    <ul class="contents-table" contentsTable>
      <li><a href="#section-one" contentsLink (click)="animateScroll('#section-one')">Section One</a></li>
      <li><a href="#section-two" contentsLink (click)="animateScroll('#section-two')">Section Two</a></li>
    </ul>
  </div>
</div>

my-module.component.css

...
// .framed makes the text scrollable. 
// If you already have a scrollable container, that is not a requirement.
.framed {
  position: relative;
  height: 400px;
  overflow-y: auto;
  border: 1px solid #e2e2e2;
  border-radius: 2px;
  padding: 25px;
}

The rest of the styles are the same as default.

License

MIT © Gerard Rovira Sánchez