ngx-animated-gradient
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    ngx-animated-gradient - Angular Directivated that animated the gardient background

    npm version, npm Join the chat at (https://gitter.im/angular-material-extensions/Lobby Build Status dependency Status devDependency Status Greenkeeper Badge license

    ngx-animated-gradien demonstration

    ngx-animated-gradien demonstration

    ngx-animated-gradien demonstration

    ngx-animated-gradien demonstration

    ngx-animated-gradien demonstration

    Demo

    View all the directives in action at https://AnthonyNahas.github.io/ngx-animated-gradient

    Dependencies

    • Angular (requires Angular 2 or higher, tested with 2.0.0)

    Installation

    1. Install via ng add. (Recommended)

    Now add the library via the angular schematics

    ng add ngx-animated-gradient

    2. Install via npm. (Alternative)

    Now install ngx-animated-gradient via:

    npm install --save ngx-animated-gradient

    SystemJS

    Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-animated-gradient:

    map: {
      'ngx-animated-gradient': 'node_modules/ngx-animated-gradient/bundles/ngx-animated-gradient.umd.js',
    }

    Once installed you need to import the main module:

    import { NgxAnimatedGradientModule } from 'ngx-animated-gradient';

    The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxAnimatedGradientModule .forRoot()):

    import { NgxAnimatedGradientModule } from 'ngx-animated-gradient';
     
    @NgModule({
      declarations: [AppComponent, ...],
      imports: [NgxAnimatedGradientModule.forRoot(), ...],  
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    Other modules in your application can simply import NgxAnimatedGradientModule:

    import { NgxAnimatedGradientModule } from 'ngx-animated-gradient';
     
    @NgModule({
      declarations: [OtherComponent, ...],
      imports: [NgxAnimatedGradientModule, ...], 
    })
    export class OtherModule {
    }

    Usage

    <div ngxAnimatedGradient></div>

    another full example

    <div class="card">
          <div class="card-header">
            ngx-animated-gradient
          </div>
          <div class="card-body" ngxAnimatedGradient style="height: 400px">
          </div>
        </div>
    option bind type default description
    colors Input() RGBValue (see the code ;)) colors to render
    tickSpeed Input() number 16 The tick speed for calling the update of the gradient
    colorIndices Input() number[] [0, 1, 2, 3] The color indices, these indicate where in the color table to load from
    gradientSpeed Input() number 0.002 The multiplier for the gradient speed

    Contributors

    • @tanepiper

    Credit

    This library is an angular directive/version of this codepen

    Other Angular Libraries

    Support

    Built by and for developers ❤️ we will help you 👊


    jetbrains logo

    This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

    License

    Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)

    Install

    npm i ngx-animated-gradient

    DownloadsWeekly Downloads

    28

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    149 kB

    Total Files

    19

    Last publish

    Collaborators

    • anthonynahas