Nifty Poutine Meal

    angular-particle
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    angular-particle

    Implementation of particle.js with TypeScript for Angular2/4. Inspired by react-particles-js

    Installation

    To install this library, run:

    $ npm install angular-particle --save

    How to use

    // Import ParticlesModule
    import { ParticlesModule } from 'angular-particle';
     
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        ParticlesModule
      ],
      providers: [],
      bootstrap: []
    })
    export class AppModule { }

    And just use the component in your HTML

    <particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>

    Parameters configuration can be found here. If you don't provide any parameters, default one are used.

    Properties

    Property Type Definition
    params object The parameters for particle.js
    style object The style of the canvas container
    width number The width of the canvas element (in %)
    height number The height of the canvas element (in %)

    Example

     
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
        myStyle: object = {};
        myParams: object = {};
        width: number = 100;
        height: number = 100;
     
        ngOnInit() {
            this.myStyle = {
                'position': 'fixed',
                'width': '100%',
                'height': '100%',
                'z-index': -1,
                'top': 0,
                'left': 0,
                'right': 0,
                'bottom': 0,
            };
     
        this.myParams = {
                particles: {
                    number: {
                        value: 200,
                    },
                    color: {
                        value: '#ff0000'
                    },
                    shape: {
                        type: 'triangle',
                    },
            }
        };
        }
    }
    <particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>

    License

    MIT © Luc Raymond

    Install

    npm i angular-particle

    DownloadsWeekly Downloads

    515

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • ryukku