npm

Need private packages and team management tools?Check out npm Orgs. »

ngx-animated-gradient

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

5

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability