{"id":13580581,"url":"https://github.com/alvarotrigo/angular-fullpage","last_synced_at":"2025-04-05T03:07:56.000Z","repository":{"id":33282937,"uuid":"152156126","full_name":"alvarotrigo/angular-fullpage","owner":"alvarotrigo","description":"Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/","archived":false,"fork":false,"pushed_at":"2024-09-03T14:39:20.000Z","size":1522,"stargazers_count":176,"open_issues_count":29,"forks_count":45,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T02:03:41.995Z","etag":null,"topics":["angular","angular-cli","angular-component","fullpage","fullpagejs","fullscreen","mousewheel","onepage","scrolling","slideshow","snap"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alvarotrigo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2018-10-08T22:44:14.000Z","updated_at":"2025-03-23T12:05:18.000Z","dependencies_parsed_at":"2024-09-25T00:31:42.973Z","dependency_job_id":null,"html_url":"https://github.com/alvarotrigo/angular-fullpage","commit_stats":{"total_commits":121,"total_committers":6,"mean_commits":"20.166666666666668","dds":0.487603305785124,"last_synced_commit":"82acaf6716350b6df457d4d75e5823a3d4e6eec9"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Fangular-fullpage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Fangular-fullpage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Fangular-fullpage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alvarotrigo%2Fangular-fullpage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alvarotrigo","download_url":"https://codeload.github.com/alvarotrigo/angular-fullpage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280264,"owners_count":20912967,"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","angular-cli","angular-component","fullpage","fullpagejs","fullscreen","mousewheel","onepage","scrolling","slideshow","snap"],"created_at":"2024-08-01T15:01:53.289Z","updated_at":"2025-04-05T03:07:55.979Z","avatar_url":"https://github.com/alvarotrigo.png","language":"TypeScript","readme":"# Angular fullpage\n![preview](https://alvarotrigo.com/angular-fullpage/imgs/angular-fullpage-wrapper.png?v=2)\n\u003cp align=\"center\"\u003e\nOfficial Angular wrapper for the \u003ca target=\"_blank\" href=\"https://github.com/alvarotrigo/fullPage.js/\"\u003efullpage.js library\u003c/a\u003e.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fullpage/angular-fullpage\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@fullpage/angular-fullpage/latest.svg\" alt=\"angular-fullpage version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- [Demo online](https://alvarotrigo.com/angular-fullpage/) | [Stackblitz](https://stackblitz.com/edit/angular-nqsqwk)\n- [fullpage.js Extensions](https://alvarotrigo.com/fullPage/extensions/)\n- Brought by [@imac2](https://twitter.com/imac2) thanks to [Vong Panha Huot\n](https://github.com/vh13294).\n\n## Table of Contents\n\n- [Installation](https://github.com/alvarotrigo/angular-fullpage#installation)\n- [License](https://github.com/alvarotrigo/angular-fullpage#license)\n- [Usage](https://github.com/alvarotrigo/angular-fullpage#usage)\n  - [Use extensions](https://github.com/alvarotrigo/angular-fullpage#use-extensions)\n  - [Use scrolloverflow](https://github.com/alvarotrigo/angular-fullpage#use-of-scrolloverflow)\n- [Dynamic changes](https://github.com/alvarotrigo/angular-fullpage#dynamic-changes)\n- [Examples](https://github.com/alvarotrigo/angular-fullpage#examples)\n- [Contributing](https://github.com/alvarotrigo/angular-fullpage#contributing)\n- [Resources](https://github.com/alvarotrigo/angular-fullpage#resources)\n\n## Installation\n\n```shell\nnpm install @fullpage/angular-fullpage\n```\n\nThis will install the Angular wrapper as well as [fullpage.js](https://github.com/alvarotrigo/fullPage.js/) library.\n\n## License\n\n### Non open source license\n\nIf you want to use angular-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. [Purchase a Fullpage Commercial License](https://alvarotrigo.com/fullPage/pricing/).\n\n### Open source license\n\nIf you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use fullPage under the terms of the GPLv3.\n\n**The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification)\n\n[Read more about fullPage's license](https://alvarotrigo.com/fullPage/pricing/).\n\n## Usage\n\n```typescript\n// app.module.ts\nimport { AngularFullpageModule } from '@fullpage/angular-fullpage';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    AngularFullpageModule //*** added\n  ]\n})\n```\n\nYou should import the fullpage.js stylesheet on your `style.scss` or `component.scss`:\n\n```scss\n/* styles.scss or app.component.scss */\n@import url(~fullpage.js/dist/fullpage.min.css);\n```\n\n```css\n/* standard css */\n@import '~fullpage.js/dist/fullpage.min.css';\n```\n\nThen use the directive on your component:\n\n```typescript\n// app.component.ts\nexport class AppComponent {\n  config: any;\n  fullpageApi: any;\n\n  constructor() {\n\n    // for more details on config options please visit fullPage.js docs\n    this.config = {\n\n      // fullpage options\n      licenseKey: 'YOUR LICENSE KEY HERE',\n      anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],\n      menu: '#menu',\n\n      // fullpage callbacks\n      afterResize: () =\u003e {\n        console.log(\"After resize\");\n      },\n      afterLoad: (origin, destination, direction) =\u003e {\n        console.log(origin.index);\n      }\n    };\n  }\n\n  getRef(fullPageRef) {\n    this.fullpageApi = fullPageRef;\n  }\n\n}\n\n```\n\nYou can optionally import types by\n\n```typescript\nimport { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min';\nconfig: fullpageOptions;\nfullpageApi: fullpageApi;\n```\n\nExample of HTML:\n\n```html\n\u003c!-- app.component.html --\u003e\n\u003cdiv fullpage id=\"fullpage\" [options]=\"config\" (ref)=\"getRef($event)\"\u003e\n  \u003cdiv class=\"section\"\u003eSome section1\u003c/div\u003e\n\t\u003cdiv class=\"section\" (click)=\"fullpageApi.moveSectionDown()\"\u003eSome section2\u003c/div\u003e\n\t\u003cdiv class=\"section\"\u003e\n\t\t\u003cdiv class=\"slide\"\u003eSlide 2.1\u003c/div\u003e\n\t\t\u003cdiv class=\"slide\"\u003eSlide 2.2\u003c/div\u003e\n\t\t\u003cdiv class=\"slide\"\u003eSlide 2.3\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv class=\"section\" (click)=\"fullpageApi.moveTo('secondPage', 2)\"\u003eSome section4\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Use extensions\nIn order to make use of [fullpage.js extension](https://alvarotrigo.com/fullPage/extensions/) you'll have to add the extension file to `angular.json`.\n\nFor example, if we want to use the `scrollHorizontally` extension we will have to add the path to our `fullpage.scrollHorizontally.min.js` file on the `scripts` array:\n\n```json\n\"assets\": [\n  \"src/favicon.ico\",\n  \"src/assets\"\n],\n\n\"styles\": [\n  \"src/styles.css\"\n],\n\n\"scripts\": [\n  \"src/assets/fullpage.scrollHorizontally.min.js\"\n],\n```\n\nThen pass the required options to fullPage.js. In this case `scrollHorizontally:true`.\n\n### Use of scrollOverflow\nSame procedure than the [use of extensions](https://github.com/alvarotrigo/angular-fullpage#use-extensions) detailed above.\n\n```json\n\"assets\": [\n  \"src/favicon.ico\",\n  \"src/assets\"\n],\n\n\"styles\": [\n  \"src/styles.css\"\n],\n\n\"scripts\": [\n  \"node_modules/fullpage.js/vendors/scrolloverflow.min.js\"\n],\n```\n\n## Dynamic Changes\nIf you want to update fullPage.js with new changes in the DOM call the `build()` method after making those changes.\n\nAn example can be seen on the [dynamic-changes example](https://github.com/alvarotrigo/angular-fullpage/blob/master/demo/app/examples/dynamic-changes/dynamic-changes.component.ts#L46):\n\n```javacript\nthis.renderer.appendChild(this.fp_directive.nativeElement, section);\nthis.fullpageApi.build(); // \u003c-- here\n```\n\nAn example for *ngFor can be seen on the [dynamic-changes-with-ngFor example](https://github.com/alvarotrigo/angular-fullpage/blob/master/demo/app/examples/dynamic-ng-for/dynamic-ng-for.component.ts#L45):\n\n```html\n\u003cdiv fullpage id=\"fullpage\" [options]=\"config\" (ref)=\"getRef($event)\"\u003e\n    \u003cdiv *ngFor=\"let section of sections\" class=\"section\"\u003e\n\t\t  \u003ch1\u003eSection {{section}}\u003c/h1\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Examples\nYou can check some examples on the [`demo` folder](https://github.com/alvarotrigo/angular-fullpage/tree/master/demo).\n\n## Contributing\n\nFound an issue? Have an idea? Check out the [Contributing](https://github.com/alvarotrigo/angular-fullpage/blob/master/CONTRIBUTING.md) guide and open a PR\n\n## Resources\n\n- [Wordpress theme](https://alvarotrigo.com/fullPage/utils/wordpress.html)\n- [fullpage.js Extensions](https://alvarotrigo.com/fullPage/extensions/)\n- [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (useful to define the `easingcss3` value)\n- [fullPage.js unpakg CDN](https://unpkg.com/fullpage.js)\n- [fullPage.js jsDelivr CDN](http://www.jsdelivr.com/#!jquery.fullpage)\n- [fullPage.js cdnJS CDN](https://cdnjs.com/libraries/fullPage.js)\n- [fullPage.js documentation](https://github.com/alvarotrigo/fullPage.js)\n","funding_links":[],"categories":["TypeScript","Third Party Components"],"sub_categories":["Scroll"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarotrigo%2Fangular-fullpage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvarotrigo%2Fangular-fullpage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarotrigo%2Fangular-fullpage/lists"}