ng-gradient-control v2.0.0

GradientControl

This library was generated with Angular CLI version 16.1.2.

Description

This Package is fully supported with angular's various version and written in angular. This provide simple drag and drop UI for change gradient colors and it's all properties. Package is configurable with multiple directives and support two way binding.

Preview of control

Preview of Delete Area (Red backgrounded) of control :

Live Demo Here

How to Use Package

Import GradientControlModule into your app.module.ts like Below :

import { GradientControlModule } from 'gradient-control';
.
.
@NgModule({
    imports: [
        ...
        GradientControlModule
    ]
});

In Your HTML Template file of angular, Just Use gradient-control selecter like below :

<gradient-control [(colorArray)]="colors"></gradient-control>

Configuration Options

Events

Service

You can Use GradientControlService for convert color array into gradient css.

import service in your component's constructor and Use it's function like below :

import { GradientControlService } from 'gradient-control';
.
.
.
constructor(public gradientService: GradientControlService) {
    .
    .
    .
}

Convert color Array into css :

    GradientControlService.getGradientCss = function(colorArray, Options: gradientCSSOptions<optional> )

    // Where
    Options: gradientCSSOptions = { 
        type: 'Linear' | 'Radial',      @Optional (default: 'Linear')
        angle: number,                  @Optional (default: 0)
        min: number<minColorStop>,      @Optional (default: 0)
        max: number<maxColorStop>       @Optional (default: 1)
        }

Note : If you used minColorStop and maxColorStop property with your custom boundry value in html with control. then you must have to pass that values into this getGradientCss function like this: service.getGradientCss(colorArray, {minColorStop: number, maxColorStop: number, gradientType: 'Linear' | 'Radial', angle: number<0-360> }).then(...)

Note : Don't use function from service that is start with underscore(_). it's for internal use of library. GradientControlService only provice one function that converts color array into css.

/* 
    below function is fire when colorArrayChnage event will fire from conmponent. check live demo and interect with control. you can check console.log in inspect > console.
*/
colorArrayChange(colorArray) {
    console.log("ColorArrayChange Event", colorArray); <== []
    this.gradientService.getGradientCss(colorArray).then(result => {
      this.backgroundCss = result;
    })
  }

In HTML, Background variable used like this :

    <div [ngStyle]="{'background': backgroundCss}">...</div>

Examples

Fully Functional Control look like this :

<gradient-control 
    [minColors]="3"
    [maxColors]="5"
    [minColorStop]="minColorStop"
    [maxColorStop]="maxColorStop"
    (onColorAdd)="onColorAdd($event)" 
    (onColorRemove)="onColorRemove($event)" 
    (onColorControlActivate)="selectPin($event)" 
    (onColorSlideStart)="onColorSlideStart($event)" 
    (onColorSliding)="onColorSliding($event)" 
    (onColorSlideEnd)="onColorSlideEnd($event)"
    [(colorArray)]="colorArray" 
    (colorArrayChange)="colorArrayChange($event)"
</gradient-control>

Js for above control looks like below:

minColorStop: number = 1
minColorStop: number = 100
colorArray: Array<any> = [
    {color: '#fff', stop: 10 },
    {color: '#f0a', stop: 45 },
    {color: '#00c', stop: 70 }
    {color: '#000', stop: 100 }
]
function onColorAdd(colorArray) {...}
function onColorRemove(colorArray) {...}
function selectPin(singleColorObject) {...}
function onColorSlideStart(colorArray) {...}
function onColorSliding(colorArray) {...}
function onColorSlideEnd(colorArray) {...}
function colorArrayChange(colorArray) {...}

You can checkout repo to see full example code with rotation angle and gradient type changes.

In above merged directive, colorArray variable will be automatic update on value changes.

Help

Each and every things that on a internet is written and develop by someone with lot's of efforts and time. You can empower them to do more and best work for others who can freely use that by Buying them a coffee.

Further help

To get more help on the this Control. Contact me on this email contact2mayurkukadiya@gmail.com