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

• ngx-auth-firebaseui
• @firebaseui/ng-bootstrap
• ngx-linkifyjs
• @angular-material-extensions/password-strength
• @angular-material-extensions/link-preview
• @angular-material-extensions/pages
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/jumbotron
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/combination-generator

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:

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)