FarmMapsLib/projects/common/src/fm/components/gradient/gradient.component.ts

import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
import { IItem} from '../../models/item'
import { IGradientstop } from '../../models/gradient';
import { GradientService } from '../../common-service.module';



@Component({
  selector: 'fm-gradient',
  templateUrl: './gradient.component.html',
  styleUrls: ['./gradient.component.scss']
})
export class GradientComponent implements OnInit,OnChanges {

  @Input() gradientItem:IItem;
  public gradientStyle:any = {};

  constructor(private ref: ChangeDetectorRef,private gradientService:GradientService) { }

  getGradientStyle(item:IItem):any {
    if(item.data && item.data.gradient) {
      const gradient = item.data.gradient as IGradientstop[];
      return this.gradientService.getGradientStyle(gradient);
    }
  }

  ngOnInit(): void {
    if(this.gradientItem && this.gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
      this.gradientStyle = this.getGradientStyle(this.gradientItem);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if(changes['gradientItem']) {
      const gradientItem = changes['gradientItem'].currentValue;
      if(gradientItem && gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
        this.gradientStyle = this.getGradientStyle(changes['gradientItem'].currentValue);
        this.ref.markForCheck();
      }      
    }
  }
}