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 forngx-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:
;
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()
):
; @
Other modules in your application can simply import NgxAnimatedGradientModule
:
; @
Usage
another full example
ngx-animated-gradient
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 ❤️ we will help you 👊
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)