Ngx-animated-gradient NPM

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

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

Drop an email to: Anthony Nahas
or open an appropriate issue
let us chat on Gitter
Built by and for developers :heart: we will help you :punch:

jetbrains logo

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

License

ngx library angular animations background colors gradient

@everything-registry/sub-chunk-2281 @infinitebrahmanuniverse/nolb-ngx-a

1.1.0

5 years ago

1.0.0

5 years ago