alvarotrigo/angular-fullpage

Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/

angular-fullpage's Issues

Height issue on first load

On first load all sections have height issues. 80px height of the next slide is visible in current viewport.

Can't click on the slides right arrow

The dots on the right side for scrolling hide the right arrow element for the slides which makes it difficult to click.

See screenshot

src/assets/fullpage_3.0.4

What's that file doing there?

src/assets/fullpage_3.0.4

Doesn't seem to be necessary to serve the demos?

Is it possible to create slides based on response data from API?

Hi
I'm trying to build a fullpage.js slide with the data from the api.

Here is my code snippet.

<div *ngIf="items">
    <div fullpage id="fullpage" [options]="config" (ref)="getRef($event)" #fullpageRef>
      <div class="section" *ngFor="let item of items; let idx = index;">
        <h1>{{idx}}</h1>
        <h2>{{item.id}}</h2>
      </div>
    </div>
  </div>

But got the following error messages.

Any thoughts on this?
Thanks

licenseKey requirement error

Hi. We implemented the package as per the demo in the github readme but we are still getting the error "fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a licenseKey option. Read about it here:". Are we missing something?

Here's a basic demo in stackblitz. I changed some letters from the license. but I can show you the mail with the full license if neccesary.
https://stackblitz.com/edit/fullpagejs-licensekey-error-4cfzwx?file=src%2Fapp%2Fapp.component.ts

Issues with dynamic changes in offset section

Hi,

I am using angular fullpage with the offset sections plugin and I have two issues with adding content dynamically to an offset section.

After adding content to the section, I call fullpage_api.build(); as described in the readme. The first problem is that the scroll position jumps to the top of the section when calling this method.

After adding content multiple times to the section, I encountered another problem: When navigating to the section, fullpage does not scroll to the selected section. This issue gets bigger as I add more and more content to the section.

Here is a screen recording: https://cl.ly/a7a91e8ff63b
I've reproduced the issues here: https://stackblitz.com/edit/angular-fullpage-issues

Possibility to mix fullpage section and normal section

Hi,

Pre-sale question, this is possible to have one section full page and after the first scroll go in a standard html page (without magnetic scroll) ?

regards,

Angular 8 incompatibility

I got error when I'm trying do Angular update:

Package "@fullpage/angular-fullpage" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.2.4").
Package "@fullpage/angular-fullpage" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.2.4").
Incompatible peer dependencies found. See above.

.setAllowScrolling(false) not working

I'm trying to prevent scrolling in angular and it's not working... I do have a license, but deleted it for the photo

Translate anchors

Hi, I'm working on a multilanguage website. Any tip on translating the anchors? I am using ngx-tranlate for the translations
Thanks in advance

SSR not working properly

The library is trying to import fullpage.js/dist/fullpage.extensions.min', no matter if it's running on platform browser or server. The fullpage extensions file in turn tries to do funny things with window, which breaks SSR rendering. I can open a PR, I think it should be a quick fix.

Lots of dependencies ?

Probably things are different in Angular compared to React or Vue, but just double checking :)

I noticed in package.json there are plenty of dependencies:

  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/router": "^6.1.10",
    "core-js": "^2.5.4",
    "fullpage.js": "^3.0.3",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },

Are they all required? Or shouldn't some of them be in devDependencies instead?

Menu links won't work

In the provided examples, the menu links won't work.
When in a path like this:

http://localhost:4200/dynamicChanges

The elements in the menu, like the following one:

<li _ngcontent-c1="" data-menuanchor="secondPage">
     <a _ngcontent-c1="" href="#secondPage">Second section</a>
</li>

Instead of just adding the hash in the current URL:

http://localhost:4200/dynamicChanges#secondPage

It always go to the root path, no idea why:

http://localhost:4200/#secondPage

I assume this has something to do with Angular?

This project was generated with [Angular CLI] version 6.2.4.

TO which extend is that info relevant?

This project was generated with [Angular CLI] version 6.2.4.

Forgive my lack of knowledge on this area :)
Is just to understand its importance and decide a better place to put it in the docs.

moveTo(a, b) does not work properly

Hello,

The moveTo(a, b) function does not work properly.
The scroll to the section works correctly but the slide does not move.

Example :

<div class="section">
    <div class="slide">slide1</div>
    <div class="slide">slide2</div>
    <div class="slide">slide3</div>
</div>
<div class="section>
</div>

fullpage_api.moveTo(1,1)

Thank you in advance.

cant inject FullpageDirective

Please include FullpageDirective in publish_api, therefore i could inject it to component, and access fullpage api from the directive, instead of using output ref. Kudos

New problem

Hi,
yesterday worked all very well but today it throws me those errors everytime i navigate out and back from the full page: any suggests?

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'classList')
at ao (fullpage.extensions.min.js:8)
at Object.Ot [as removeAnimation] (fullpage.extensions.min.js:8)
at window.fp_dropEffectExtension.i.destroy (src\assets\effects\fullpage.dropEffect.min.js:16)
at HTMLDivElement.J (src\assets\effects\fullpage.dropEffect.min.js:16)
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.js:28659)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)
at ZoneTask.invokeTask [as invoke] (zone.js:516)
at invokeTask (zone.js:1656)

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'color')
at window.fp_dropEffectExtension.i.apply (src\assets\effects\fullpage.dropEffect.min.js:16)
at Kt (fullpage.extensions.min.js:8)
at Ze (fullpage.extensions.min.js:8)
at ve (fullpage.extensions.min.js:8)
at Re (fullpage.extensions.min.js:8)
at HTMLDocument.Ye (fullpage.extensions.min.js:8)
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.js:28659)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)

How to autoplay horizontal slides

I was trying with this: https://alvarotrigo.com/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/
but Angular doesn't find the name 'fullpage_api' in this code adding in my component and can't compile:

`
// fullpage options
licenseKey: 'MY_LICENSE',
anchors: ['one', 'two'],
navigation:false,
slidesNavigation: true,
verticalCentered:false,
animateAnchor:false,
autoScrolling:false,
bigSectionsDestination:'top',
fitToSection:false,
paddingTop:69,
controlArrows: false,
var g_interval: any;
// for more details on config options please visit fullPage.js docs
this.config = {

afterLoad: function (origin: any, destination: any, direction: any) {
clearInterval(g_interval);

const lapse = 1000;

const shouldAutoPlay = destination.item.hasAttribute('data-auto');

const hasSlides = destination.item.querySelectorAll('.fp-slides').length;

if(shouldAutoPlay && hasSlides){
g_interval = setInterval(function () {
//here is the bug
fullpage_api.moveSlideRight();
}, lapse);
}
},

};`

The const lapse seems to work, , but every second it shows this error:
TypeError: undefined is not an object (evaluating 'this.fullpage_api.moveSlideRight')

Any idea about configure this code to work in Angular?

Thanks in advance

Not working in angular 8, I can't install it

When i tried install:

npm WARN @fullpage/[email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @fullpage/[email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

npm ERR! path C:\Users\rojo7006\practicas\lor\lorval2019\node_modules\@types\jasmine\ts3.1 npm ERR! code EPERM npm ERR! errno -4048 npm ERR! syscall unlink npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\rojo7006\practicas\lor\lorval2019\node_modules\@types\jasmine\ts3.1' npm ERR! { [Error: EPERM: operation not permitted, unlink 'C:\Users\rojo7006\practicas\lor\lorval2019\node_modules\@types\jasmine\ts3.1'] npm ERR! cause: npm ERR! { Error: EPERM: operation not permitted, unlink 'C:\Users\rojo7006\practicas\lor\lorval2019\node_modules\@types\jasmine\ts3.1' npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'unlink', npm ERR! path: npm ERR! 'C:\\Users\\rojo7006\\practicas\\lor\\lorval2019\\node_modules\\@types\\jasmine\\ts3.1' }, npm ERR! stack: npm ERR! 'Error: EPERM: operation not permitted, unlink \'C:\\Users\\rojo7006\\practicas\\lor\\lorval2019\\node_modules\\@types\\jasmine\\ts3.1\'', npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'unlink', npm ERR! path: npm ERR! 'C:\\Users\\rojo7006\\practicas\\lor\\lorval2019\\node_modules\\@types\\jasmine\\ts3.1', npm ERR! parent: 'lorval2019' } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator (though this is not recommended).

Examples: add a stand alone example

It would be great if we could add a stand alone example too.

I tried running ng build --aot on the src folder, but the compiled files are getting generated in the root folder dist/fullpage/ folder.
Is that how it is suppose to be?

Also, not quite sure if there's a way to, instead of compiling the whole example, run it in codepen? Like with vue?

Here's an angular 6 example I found:
https://codepen.io/guzmanator/pen/eVaZKr/?editors=1010

I

Issue with autoplay video

I followed the fullpage demo to work with an angular app. A component with 3 sections and a video on the 2nd section. When I scroll to the second section the video is not playing even with autoplay settings, and I get this error on console:

• Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

The only way to make it play is to click first on anything on the page and then scroll to the section with the video.

On the stackblitz demo it may seem to be working but if you open the application URL you can see the issue.

Demo on stackblitz: https://stackblitz.com/edit/angular-ivy-fg136l
Application URL: https://angular-ivy-fg136l.stackblitz.io

Angular 6 routing conflict

Angular Routing causes issue with scrolling on FullPage.js

These are the fullpage options used:

	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	sectionsColor: ['#7BAABE', 'whitesmoke', '#7BAABE', 'whitesmoke', '#7BAABE'],
	menu: '#menu',
	lockAnchors: true,

Testing by moving the fullpage code outside of the router proves that the router is what causes the issue with FullPage, where it creates a scrollbar and allows the user to scroll midway between two sections.

All code tested with was the original code from https://www.npmjs.com/package/@fullpage/angular-fullpage, placed inside of a router.

Steps to reproduce it

1. Angular Routing, setup child page that uses fullpage.
2. Navigate to child, and scroll a relatively significant amount.
3. Section will move beyond its area, showing the next section

Versions

Chrome and Firefox, Angular 6, latest fullpage.js
This is an example of what is seen when scrolling, the two colors are from two sections.

Lets add fullPage.js directly on the component?

Right now if we want to create a project using angular-fullpage we have to:

• intall fullPage.js
• install angular-fullpage

Perhaps we could just include fullPage.js within angular-fullpage so we only have to install a single thing?

That's the approach we followed with the Vue and React wrappers.

What do you think @vh13294 ?

Default selector?

Looking at angular-fullpage/projects/angular-fullpage/src/lib/fullpage.directive.ts I noticed things like:

el.nativeElement.id = 'fullpage';

Or

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[fullpage]'

Does it mean the user will have to compulsory use the attribute id="fullpage"?
Isn't there a way to change that and make it in a way they can customise it ?

Npm publish wrong directory

Hey,

I tested out the latest build, there is an error in import.
you're suppose to publish the dist folder not the root directory.

Config: any? fullpage_api: any?

Both on the readme.md examples and in the examples within the src folder I can see:

export class TestTwoComponent implements OnInit {
  config: any;
  fullpage_api: any;

What's any suppose to be?
Hope is not a very stupid question, but looks weird to me :D

When I use variable in href, href will disappear.

Code:
<a data-fancybox [href]="item"> </a>
Result:
<a _ngcontent-oxd-c13="" ng-reflect-href="http://mydomain.com/"></a>

Navigation to fragment does not work

Hi, I have changed the routing strategy in a project in angular to HashLocationStrategy, useHash: true in the app-routing.module. This adds the # symbol to the url, something like mydomain.com/#/my-route. Since I changed the strategy, due to a third party server incompatibility with PathLocationStrategy, anchor navigation has stopped working. Is there a fullpage.js configuration to fix this issue? Thanks in advance

fullPage.js types improved

@vh13294 could you double check my commit regarding the fullpage.js types?

Not quite sure why some callbacks were set as any and others as void.
So correct me if I need to revert some changes.

Notice I'm commiting now to the dev branch.
I'll merge all improvements to the branch in each new release.

Add npm script to build the project?

Should we add a new npm script to build the project and generate the dist files?

npm run build angular-fullpage

Right now we have the following ones:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Examples: "Move to second page" & "remove last" not working after "testRebuild"

I've committed a change. So please feel free to pull from master to get the latest version.

Also, I noticed when clicking on the button "Add sections and change color" that calls testRebuild then the other 2 buttons won't do anything at all.

Example?

I assume this would be an example of usage?
https://github.com/alvarotrigo/angular-fullpage/blob/master/src/app/app.component.html

Should we perhaps separate it somehow? Not quite sure how it's usually done on Angular repos, as I didn't see any example folder in others.

Avoid having to import multiple things?

I noticed on the docs you have to import:

import { AngularFullpageModule } from 'angular-fullpage';

and

import { fullpage_api , options } from 'fullpage.js/dist/fullpage.extensions.min';

Could we include by default 'fullpage.js/dist/fullpage.extensions.min'; in our directive to make it easier for them so they only have to include a single file?
Similar to what Handsontable did and to what FilePond did. (I think it can be seen here)

That's what we did also for vue-fullpage.js and react-fullpage.js.

Do you see any drawbacks doing that? Please let me know your thoughts on it. I'm all hears!

Angular fade effect extension issues

hi, i have added the fade effect to a project in angular. I only need it to be active on the home page, but it is being applied in all other components that have fullscreen added in their .ts.

I've tried to override it where I don't want it to apply with fadeeffect false, but I can't turn it off.

Any idea of how to apply it? Thank you so much

Ivy distribution??

Think is time for an Ivy distribution.

FullPageJs with static header

Hi team,

My page currently have a static header with height is 110px. I'm now using property paddingTop : '110px' but seam like it work incorrectly.

It will create a padding-top: 110px for each section so the height of fb-table is not correct and the scrolling position is the same.

Lack of example using scrollOverflow

On the docs you've explained how to use extensions, which is great!!
But I noticed the use of the scrollOverflow option (which requieres the /vendors/scrollOverflow.min.js file) is not explained.

I assume it works exactly in the same way as the extensions.
However, it would be great to add it in one of the 2 examples you created.

That will make it easier for people and we'll be able to point them to that example if they want to use any of those options.

As the extensions files are not public, we can perhaps just comment out the extension file as I did on the Vue wrapper example?

I would have done this myself, but I'm not quite sure how the angular.json file works and why it is not in the examples folder (src).

Should we just add it in the root angular.json file?

@fullpage/angular-fullpage is not working on angular14

This likely means that the library (@fullpage/angular-fullpage) which declares AngularFullpageModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Wrong default values?

Hey @vh13294 !

I was checking src/app/app.component.ts and noticed some values are not really the default ones, but the ones used in the docs as a example of usage.

Things like:

  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
  menu: '#menu',
  paddingTop: '3em',
  paddingBottom: '10px',
  parallax: true,

You can see all default values here:
https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js#L105

Also, I do not see any of the available parameters on the callbacks such as onLeave.
Not sure if this is relevant :)

Move examples in the demo to stackblitz

As things stand, this project has an examples/demo folder with examples on how to use this wrapper. The demo directory does not have a package.json or a package lock file, and can be hard to understand and test in external editors such as stackblitz. It also does not include changes done to the angular.json file

It also makes it harder to report issues as seen here:
#59

I have attempted to make a demo for scrolloverflow here: https://stackblitz.com/edit/angular-vqgwxw

However, I can't scroll to see the full text - it jumps to the next section. Any feedback on this would be appreciated.

Implementing dynamic change and rebuild!

angular-fullpage/projects/angular-fullpage/src/lib/fullpage.directive.ts

Line 29 in b2b1047

// bug destroy(all) also destroyed angular events such as (click)

FullPageJs with static header

Hi @alvarotrigo,

Please help check this: https://jsfiddle.net/Hieu_Truong/9awxv1gm/

Angular 7 - vertical dot navigation not shown

Description

In my page I can not see the navigation dots.
Configuration:

• Angular 7
• Mac OS
• Chrome
• use angular-fullpage : Official Angular wrapper component

Link to isolated reproduction with no external CSS / JS

My code:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AngularFullpageModule } from '@fullpage/angular-fullpage';

import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AngularFullpageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

---

app.component.ts

Section 1

Section 2

Section 3

---

app.component.ts

import { Component, OnInit } from '@angular/core';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
config;
fullpage_api;

constructor() {

// this is just an example => for more details on config please visit fullPage.js docs
this.config = {
  licenseKey: 'FF9866F3-8A9840CC-A41EBA5D-12BD97ED',
  anchors: ['firstPage', 'secondPage', 'thirdPage'],
  menu: '#menu',
  navigation: true,
  navigationPosition : 'left',
  slidesNavigation : true,
  keyboardScrolling: true,
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],


  // events callback
  afterLoad: (origin, destination, direction) => {
    // console.log(destination);
  },
  afterRender: () => {
    // console.log('afterRender');
  },
  afterResize: (width, height) => {
    // console.log('afterResize' + width + ' ' + height);
  },
  afterSlideLoad: (section, origin, destination, direction) => {
    // console.log(destination);
  }
};

}

ngOnInit() {
}

getRef(fullPageRef) {
this.fullpage_api = fullPageRef;
}

}

---

Destroy and init FullpageJS in angular

Hi team,

I see many example how to destroy and init fullpageJS using Javascript, but how could I destroy and then init again in angular. For example in getRef function I've defined like this:

getRef(fullPageRef) {
this.fullpage_api = fullPageRef;
this.fullpage_api.destroy('all');
// How could I init the fullpage again?
}

So after destory the fullpagejs, how could I init it again in angular?

licenseKey error

We have purchased the license and added the key, but still getting the below error:

fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a licenseKey option. Read about it here:

scrollOverflow is not working

Hi
I've included scrolloverflow.min.js and set the following flags in config.

scrollOverflow: true,
scrollOverflowReset:true,

But scrollOverflow is still not working.

Any change this can get updated to the latest versions?

Any chance this plugin can get updated to the latest versions of Angular and Fullpage.js?

app.component.html error

"Can't bind to 'options' since it isn't a known property of 'div"

https://github.com/koolkav1/sample-angular-fullpage

It seems to not be correctly imported. I have purchased the full page hobby license for support. I can email you my license key.

scrollOverflow doesn't work

Hi,
I'm using Angular 8.
I've installed angular-fullpage with npm, and purchased a Hobby license of fullpageJS, the license code has been added to the config object.

I've copy-pasted your scrollOverflow example, added the js file to the angular.json file to the scripts section, I'm still getting:

fullPage: The option scrollOverflow:true requires the file scrolloverflow.min.js. Please include it before fullPage.js. error message in the JS console. Why?

When I open the source code of the HTML page in the browser I can find the scrollOverflow js content in the srcipts.js file.

Update Stackblitz

Should we update the Stackblitz to match the lastest update?