{"id":15649055,"url":"https://github.com/zurfyx/angular-contents","last_synced_at":"2026-01-07T18:05:19.949Z","repository":{"id":37561889,"uuid":"90371098","full_name":"zurfyx/angular-contents","owner":"zurfyx","description":"Angular 5 Table of Contents that follows you while you scroll down","archived":false,"fork":false,"pushed_at":"2023-06-12T18:10:29.000Z","size":1132,"stargazers_count":40,"open_issues_count":6,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-16T02:14:13.272Z","etag":null,"topics":["angular-contents","angular5","contents","index","scroll","table"],"latest_commit_sha":null,"homepage":"https://zurfyx.github.io/angular-contents","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zurfyx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-05T11:57:54.000Z","updated_at":"2024-04-27T14:09:48.000Z","dependencies_parsed_at":"2024-06-21T16:53:33.234Z","dependency_job_id":"5c2b666c-0940-4cb2-96d2-a085b838f771","html_url":"https://github.com/zurfyx/angular-contents","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.02631578947368418,"last_synced_commit":"739045c0fbcafd58bc3ee789b6d1e235d3793c19"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-contents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-contents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-contents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-contents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zurfyx","download_url":"https://codeload.github.com/zurfyx/angular-contents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246258868,"owners_count":20748573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-contents","angular5","contents","index","scroll","table"],"created_at":"2024-10-03T12:27:32.154Z","updated_at":"2026-01-07T18:05:19.903Z","avatar_url":"https://github.com/zurfyx.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Contents\n\n[![npm Version](https://img.shields.io/npm/v/angular-contents.svg)](https://www.npmjs.com/package/angular-contents)\n[![Build Status](https://travis-ci.org/zurfyx/angular-contents.svg?branch=master)](https://travis-ci.org/zurfyx/angular-contents)\n\n\u003e Angular Table of Contents that follow you while you scroll down.\n\n## Demo\n\n[zurfyx.github.io/angular-contents](https://zurfyx.github.io/angular-contents/)\n\n## Install\n\n```\nnpm install angular-contents\n```\n\n## Getting started\n\n**If you are using Angular Material, you are most likely going to have to use [Scrolling View.](#full-scrolling-view)**\n\n[my-module.module.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/app.module.ts)\n\n```\nimport { ContentsModule } from 'angular-contents';\n\n@NgModule({\n  imports: [\n    ...\n    ContentsModule,\n    ...\n  ],\n```\n\n[my-module.component.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/default.component.ts)\n\n∅\n\n[my-module.component.html](https://github.com/zurfyx/angular-contents/blob/master/example/app/default.component.html)\n\n```\n\u003cdiv class=\"columnify\" contents\u003e\n  \u003c!-- Body --\u003e\n  \u003cdiv\u003e\n    \u003cdiv [contentsSection]=\"'section-one'\"\u003e\n      \u003ch1\u003eSection One\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n\n    \u003cdiv [contentsSection]=\"'section-two'\"\u003e\n      \u003ch1\u003eSection Two\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n  \u003c!-- Table of Contents --\u003e\n  \u003cdiv class=\"table-column\"\u003e\n    \u003cul class=\"contents-table\" contentsTable\u003e\n      \u003cli\u003e\u003ca href=\"#section-one\" contentsLink\u003eSection One\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#section-two\" contentsLink\u003eSection Two\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u0026ast; class names can be freely renamed. Just make sure to adjust the CSS classes later accordingly.\n\n[my-module.component.css](https://github.com/zurfyx/angular-contents/blob/master/example/app/default.component.scss)\n\nBelow are the styles that the Angular Contents [demo page](https://zurfyx.github.io/angular-contents/) uses. Only the `\u003c-- must have` fields are required. Feel free to adjust the rest to your website style.\n\nThe snippet above displays the Angular Contents specific styles, you can find the full page styles [here](https://github.com/zurfyx/angular-contents/blob/master/example/app/default.component.scss).\n\n```\n.contents-table {\n  // Do not use margin here. It will be overwritten.\n  position: absolute; // \u003c-- must have.\n  padding: 2rem;\n}\n\n.contents-table.sticky {\n  position: fixed; // \u003c-- must have.\n  top: 0; // \u003c-- must have.\n}\n\n.contents-table {\n  list-style: none;\n  margin: 0;\n}\n\n.contents-table a {\n  border-radius: 4px;\n  display: block;\n  padding: 0.3rem 0.6rem;\n  color: #444;\n  text-decoration: none;\n}\n\n.contents-table a.active {\n  background-color: #000;\n  color: #fff;\n}\n\n.columnify \u003e .table-column {\n  flex: 0 1 auto;\n  width: 220px;\n}\n\n// Columnify https://stackoverflow.com/a/47220287\n.columnify {\n  display: flex;\n}\n\n.columnify \u003e * {\n  flex: 1;\n}\n\n.columnify \u003e *:not(:first-child) {\n  margin-left: 2rem;\n}\n```\n\n## Scroll animation\n\nBy default, Angular Contents carries no animation. Feel free to choose a scrolling library of your choice.\n\nThe demo page uses [ngx-page-scroll](https://github.com/Nolanus/ngx-page-scroll). Attaching it to Angular Contents is as simple as it follows.\n\nInstall the library\n\n```\nnpm install ngx-page-scroll\n```\n\nImport the library into your Module\n\n```\nimport { ContentsModule } from 'angular-contents';\nimport { NgxPageScrollModule } from 'ngx-page-scroll';\n\n  imports: [\n    ...\n    ContentsModule,\n    NgxPageScrollModule,\n    ...\n  ],\n```\n\nAdd functionality to your Component HTML\n\n```\n\u003cul class=\"contents-table\" contentsTable\u003e\n  \u003cli\u003e\u003ca href=\"#section-one\" contentsLink pageScroll\u003eSection One\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#section-two\" contentsLink pageScroll\u003eSection Two\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#section-three\" contentsLink pageScroll\u003eSection Three\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#section-four\" contentsLink pageScroll\u003eSection Four\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#section-five\" contentsLink pageScroll\u003eSection Five\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nNotice `pageScroll` addition.\n\nFor further [ngx-page-scroll](https://www.npmjs.com/package/ngx-page-scroll) configuration, such as scroll speed, you should check their [own repository](https://github.com/Nolanus/ngx-page-scroll).\n\n## [Advanced] Scrolling view\n\nBy 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.\n\nMore 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.\n\nBy using the special binding `[scrollingView]`, you can set the scrolling container of your choice instead of the default one.\n\n### Partial scrolling view\n\nBelow we present the source code of the one that is working in the first scrolling view demo, once you switch to the \"Scroll View\". Partial scrolling view source code features only the text content under the scrolling view. You can check the full source code by clicking on the file names.\n\n[my-module.module.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/app.module.ts)\n\n*Same as default.*\n\n[my-module.component.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view.component.ts)\n\n```\nimport { Component, ViewEncapsulation, ViewChild, ElementRef, Inject } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { PageScrollService, PageScrollInstance } from 'ngx-page-scroll';\n\n@Component({\n  selector: 'app-scrolling-view',\n  templateUrl: 'scrolling-view.component.html',\n  styleUrls: ['scrolling-view.component.scss'],\n})\nexport class ScrollingViewComponent {\n  @ViewChild('container') private container: ElementRef;\n\n  constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {}\n\n  public animateScroll(sectionTarget: string): void {\n    // https://github.com/Nolanus/ngx-page-scroll#service\n    const pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({\n      document: this.document, scrollTarget: sectionTarget, scrollingViews: [this.container.nativeElement]\n    });\n    this.pageScrollService.start(pageScrollInstance);\n  }\n}\n```\n\nThe scrolling animation, just like by default can also be done with `ngx-page-scroll`. In fact, that's [why it was initially requested](https://github.com/zurfyx/angular-contents/issues/4) and the reason why we try to stick to their names.\n\nTo 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](https://github.com/Nolanus/ngx-page-scroll#service).\n\nAngular 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;`\n\n[my-module.component.html](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view.component.html)\n\n```\n\u003cdiv class=\"columnify\" contents [scrollingView]=\"container\"\u003e \u003c!-- We use the container referenced below --\u003e\n  \u003c!-- Body --\u003e\n  \u003cdiv class=\"framed\" #container\u003e \u003c!-- Notice the #container --\u003e\n    \u003cdiv [contentsSection]=\"'section-one'\"\u003e\n      \u003ch1\u003eSection One\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n\n    \u003cdiv [contentsSection]=\"'section-two'\"\u003e\n      \u003ch1\u003eSection Two\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n  \u003c!-- Table of Contents --\u003e\n  \u003cdiv class=\"table-column\"\u003e\n    \u003cul class=\"contents-table\" contentsTable\u003e\n      \u003cli\u003e\u003ca href=\"#section-one\" contentsLink (click)=\"animateScroll('#section-one')\"\u003eSection One\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#section-two\" contentsLink (click)=\"animateScroll('#section-two')\"\u003eSection Two\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n[my-module.component.css](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view.component.scss)\n\n```\n...\n// .framed makes the text scrollable. \n// If you already have a scrollable container, that is not a requirement.\n.framed {\n  position: relative;\n  height: 400px;\n  overflow-y: auto;\n  border: 1px solid #e2e2e2;\n  border-radius: 2px;\n  padding: 25px;\n}\n```\n\n*The rest of the styles are the same as default.*\n\n### Full scrolling view\n\n**A note to Angular Material users:** Angular Material carries [its own content container](https://github.com/zurfyx/angular-contents/issues/2#issuecomment-358700968), `mat-sidenav-content`. Thus, the default example will not work for you since it targets `window` or `document`. In this case, you are going to have to make use of the *full scrolling view* to make it work on your site, and target `[scrollingView]=document.querySelector('mat-sidenav-content')`.\n\nIn the previous section, only the text content was part of the scrolling view. In the full scrolling view example below, the Table of Contents is also part of the scrolling view. Since the changes are minimal and accumulative, and for the sake of not rewriting it all, you should check [Partial scrolling view](#partial-scrolling-view) before.\n\nAll and all, you can check the full source code here: \n[my-module.module.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/app.module.ts)\n[my-module.component.ts](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view-table.component.ts)\n[my-module.component.html](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view-table.component.html)\n[my-module.component.scss](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view-table.component.scss)\n\n[my-module.component.html](https://github.com/zurfyx/angular-contents/blob/master/example/app/scrolling-view-table.component.html)\n\n```\n\u003cdiv class=\"columnify\" contents [scrollingView]=\"container\" #container\u003e\n  \u003c!-- Body --\u003e\n  \u003cdiv class=\"framed\"\u003e\n    \u003cdiv [contentsSection]=\"'section-one'\"\u003e\n      \u003ch1\u003eSection One\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n\n    \u003cdiv [contentsSection]=\"'section-two'\"\u003e\n      \u003ch1\u003eSection Two\u003c/h1\u003e\n      ...\n    \u003c/div\u003e\n  \u003c!-- Table of Contents --\u003e\n  \u003cdiv class=\"table-column\"\u003e\n    \u003cul class=\"contents-table\" contentsTable [scrollingView]=\"container\"\u003e\n      \u003cli\u003e\u003ca href=\"#section-one\" contentsLink (click)=\"animateScroll('#section-one')\"\u003eSection One\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#section-two\" contentsLink (click)=\"animateScroll('#section-two')\"\u003eSection Two\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## License\n\nMIT © [Gerard Rovira Sánchez](//zurfyx.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-contents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzurfyx%2Fangular-contents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-contents/lists"}