View all the directives in action at https://AnthonyNahas.github.io/ngx-animated-gradient
- Angular (requires Angular 2 or higher, tested with 2.0.0)
Now add the library via the angular schematics
ng add ngx-animated-gradient
Now install ngx-animated-gradient
via:
npm install --save ngx-animated-gradient
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:
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 {
}
<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 |
- @tanepiper
This library is an angular directive/version of this codepen
- 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
- 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
Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)