{"id":21163145,"url":"https://github.com/techfever-soft/ngx-spa-support","last_synced_at":"2026-05-19T01:36:39.078Z","repository":{"id":191040876,"uuid":"683533236","full_name":"techfever-soft/ngx-spa-support","owner":"techfever-soft","description":"Helper to scroll anchors in single page apps","archived":false,"fork":false,"pushed_at":"2024-09-04T14:37:16.000Z","size":139,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-21T09:48:42.260Z","etag":null,"topics":["angular","scrolling","singlepageapplication"],"latest_commit_sha":null,"homepage":"https://ngx-spa-support.web.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techfever-soft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-08-26T21:52:28.000Z","updated_at":"2024-09-04T14:37:20.000Z","dependencies_parsed_at":"2024-09-05T18:44:26.021Z","dependency_job_id":"c198d39f-ae3c-442c-acd7-885546cbaf0e","html_url":"https://github.com/techfever-soft/ngx-spa-support","commit_stats":null,"previous_names":["techfever-soft/ngx-spa-support"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techfever-soft%2Fngx-spa-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techfever-soft%2Fngx-spa-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techfever-soft%2Fngx-spa-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techfever-soft%2Fngx-spa-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techfever-soft","download_url":"https://codeload.github.com/techfever-soft/ngx-spa-support/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243608001,"owners_count":20318497,"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","scrolling","singlepageapplication"],"created_at":"2024-11-20T13:40:16.071Z","updated_at":"2026-05-19T01:36:39.042Z","avatar_url":"https://github.com/techfever-soft.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📲 ngx-spa-support\n\nA package to help you to build more easily single page applications, using scroll anchors.\n\n#\n\n![](https://img.shields.io/npm/v/ngx-spa-support) ![](https://img.shields.io/npm/dt/ngx-spa-support)\n\n# Demo\n\n[SEE DEMO](https://ngx-spa-support.web.app/)\n\n# Features\n\n- [x] Anchor scrolling\n- [x] Menu scroll-spy\n- [x] Dynamic anchors \n- [x] Scroll snapping \n- [ ] Keyboard navigation\n- [ ] Section horizontal scrolling\n- [ ] Menu horizontal scrolling\n- [ ] Custom transitions\n- [ ] Infinite scroll\n\n# Basic example\n\nTemplate part\n\n```\n\u003cngx-spa-support [config]=\"spaConfig\"\u003e\n  \u003cngx-spa-support-menu\u003e\n    \u003ca *ngFor=\"let menuItem of menuItems\" [ngxAnchor]=\"menuItem.link\"\u003e\n      {{ menuItem.data[\"label\"] }}\n    \u003c/a\u003e\n  \u003c/ngx-spa-support-menu\u003e\n\n  \u003cngx-spa-support-scrollable\u003e\n    \u003csection [id]=\"section.link\" *ngFor=\"let section of menuItems\"\u003e\n      {{ section | json }}\n    \u003c/section\u003e\n  \u003c/ngx-spa-support-scrollable\u003e\n\u003c/ngx-spa-support\u003e\n```\n\nTypeScript\n\n```\n  public spaConfig: NgxSpaSupportConfig = {\n    menu: \u003cNgxSpaSupportMenuItem[]\u003e[\n      {\n        link: 'mySection1',\n        active: false,\n        removable: false,\n        data: {\n          label: 'My first section',\n        },\n      },\n      {\n        link: 'mySection2',\n        active: true,\n        removable: true,\n        data: {\n          label: 'My second section',\n        },\n      },\n    ],\n    scrollBehavior: 'smooth',\n    sectionDetectionSize: 250,\n    scrollOnCreated: true,\n    scrollSnapping: true,\n  };\n\n  constructor(\n    private spaService: NgxSpaSupportService\n  ) {\n    this.spaService\n      .getMenuItems()\n      .subscribe((menuItems: NgxSpaSupportMenuItem[]) =\u003e {\n        this.menuItems = menuItems;\n      });\n  }\n\n\n```\n\nStyle part (SCSS)\n\n```\n* {\n    clear: both;\n    box-sizing: border-box;\n}\n\nhtml,\nbody {\n    height: 100%;\n}\n\nbody {\n    margin: 0;\n}\n\nngx-spa-support {\n    ngx-spa-support-menu {\n        position: fixed;\n        top: 100px;\n        a.active {\n            background: blue;\n            color: #fff;\n        }\n    }\n    ngx-spa-support-scrollable {\n        display: block;\n        height: 100%;\n        overflow: auto;\n\n        section {\n            height: 100%;\n            \u0026:nth-child(1) {\n                background: #858585;\n            }\n            \u0026:nth-child(2) {\n                background: #afafaf;\n            }\n            \u0026:nth-child(n + 3) {\n                background: #dddddd;\n            }\n        }\n    }\n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechfever-soft%2Fngx-spa-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechfever-soft%2Fngx-spa-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechfever-soft%2Fngx-spa-support/lists"}