ng2-fullpage

Create Beautiful Fullscreen Scrolling websites (now with Angular 2)!

This is an Angular 2 fullPage.js port library.

NEW RELEASE 2.0.1: ANGULAR 2 FINAL

Demo

Check out the live demo HERE

Quick Start

Start with SystemJS

Plunker example

With AngularClass/angular2-webpack-starter:

Install ng2-fullpage npm module:

  npm install ng2-fullpage --save

Install ambient typings for jquery library:

  npm install @types/jquery --save-dev
  
  # or if you prefer "typings" tool
  typings install jquery --save --ambient

Write some code:

app/app.module.ts:

/**
 *
 * File: app/app.module.ts
 *
 */
 
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { MnFullpageDirective, MnFullpageService } from "ng2-fullpage";

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        MnFullpageDirective // add MnFullpageDirective declaration here
    ],
    imports: [
        BrowserModule,
    ],
    providers: [
        MnFullpageService // also add MnFullpageService provider here
    ]
})
export class AppModule {

}

/**
* 
* File: app/app.component.ts
* 
* If you are starting from scratch replace existing content with the code below
* Otherwise update your html template with 'mnFullpage' directive.
* 
*/

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

@Component({
  selector: 'app',
  template: `
        <div mnFullpage 
            [mnFullpageNavigation]="true" 
            [mnFullpageKeyboardScrolling]="true"
            [mnFullpageControlArrows]="false">
            <div class="section fp-section fp-table">        
                <div class="fp-tableCell">
                    Some section 1
                </div> 
            </div>
            <div class="section fp-section fp-table">        
                <div class="fp-tableCell"> Some section 2</div> 
            </div>
            <div class="section fp-section fp-table">
                <div class="fp-tableCell">
                    <div class="slide"> Slide 1 </div>
                    <div class="slide"> Slide 2 </div>
                    <div class="slide"> Slide 3 </div>
                    <div class="slide"> Slide 4 </div>
                </div>
            </div>
            <div class="section fp-section fp-table">        
                <div class="fp-tableCell"> Some section 4</div> 
            </div>
        </div>
   
    `
})
export class AppComponent {
    // no additional config is required
}

Update webpack vendors entry file (src/vendor.browser.ts) with 'jquery' and 'fullpage.js' import:

/**
* 
* File: vendor.browser.ts
* 
* Just add 'jquery' module import statement.
* 
*/

import 'jquery';
import 'fullpage.js'

Start server and open http://localhost:3000 url in browser:

npm run start

Usage

Basic installation

All you need to do is just add [mnFullpage] @Component.directives array and add directive to an html element inside your template:

app/app.module.ts:

/**
* 
* Just add MnFullpageDirective into the @Component.declarations  
* and MnFullpageService into the @Component.providers arrays
* 
*/

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { MnFullpageDirective, MnFullpageService } from "ng2-fullpage";

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        MnFullpageDirective // add MnFullpageDirective declaration here
    ],
    imports: [
        BrowserModule,
    ],
    providers: [
        MnFullpageService // also add MnFullpageService provider here
    ]
})
export class AppModule {

}

app/app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: ./template.html
})
export class AppComponent {
    // no additional config is required
}

template.html:

<!-- Add fullpage directive to an element -->

<div mnFullpage>
   ...
</div>

Advanced usage

Like it is done in most of libraries, you can configure fullpage.js for you goals. There 3 ways to configure fullPage.js:

• Via attributes. Define options like attributes on the same element.

Notice, options must be prefixed with 'mnFullpage' word and written in camelCase style.

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

@Component({
  selector: 'app',
  template: `
    <div mnFullpage [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true">
        ....
    </div>  
  `
})
export class AppComponent {
}

• Via options object. Use FullpageOptions configuration object to inject options.

Notice to wrap directive in square brackets [mnFullpage] and reference it to your options object

import { Component, Input } from '@angular/core';
import { MnFullpageOptions } from 'ng2-fullpage';

@Component({
    selector: 'app',
    template: `
        <div [mnFullpage]="options">
            ....
        </div>
    `
})
export class AppComponent {

    @Input() public options: MnFullpageOptions = new MnFullpageOptions({
        navigation: true,
        keyboardScrolling: true
    });

}

• Mixed. Mix two approaches to configure.

Notice, html element options have less priority than options inside options object.

import { Component, Input } from '@angular/core';
import { MnFullpageOptions } from 'ng2-fullpage';

@Component({
    selector: 'app',
    template: `
        <div [mnFullpage]="options" [mnFullpageNavigation]="true">
            ....
        </div>
    `
})
export class AppComponent {

    @Input() public options:MnFullpageOptions = new MnFullpageOptions({
        keyboardScrolling: true
    });

}

Services

Service MnFullpageService contains $.fn.* static methods for fullPage.js library.

import { Component, Input } from '@angular/core';
import { MnFullpageService } from 'ng2-fullpage';

@Component({
    selector: 'app',
    template: `
        <button (click)="fullpageService.moveSectionUp();">Move section up</button>
        <button (click)="fullpageService.moveSectionDown();">Move section down</button>
        
        <div mnFullpage [mnFullpageNavigation]="true">
            ....
        </div>
    `
})
export class AppComponent {

     constructor(private fullpageService: MnFullpageService) {
     }

}

Troubleshooting

View Encapsulation issue

Thanks to @aamir1995 #94

If you get error when you include fullPage.js styles into your component, probably you've faced with Angular 2 ViewEncapsulation issue #94.

Try to update your component: Set value of 'encapsulation' property to 'ViewEncapsulation.None' like this below:

@Component({
    ...
    encapsulation: ViewEncapsulation.None
    ...
})
export class AppComponent {
    ...
}

Development

Build

# development
npm run build:dev

# production
npm run build:prod

Watch and build files

npm run watch

Run tests

npm run test

Watch and run tests

npm run watch:test

License

MIT