ng-gradient-button#ngStyle.ts

@Component({
  selector: 'app-gradient-button',
  template: `
  <span class="gradient" [ngStyle]="gradientStyle"></span>
  <span class="content">
    <ng-content></ng-content>
  </span>
  `,
  styles: [
    `
     // ..
     
     .gradient {
        position: absolute;
        background: radial-gradient(circle closest-side, #9b27af, transparent);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
      }
    `
  ]
})
export class GradientButtonComponent {
  // ..
  
  get gradientStyle() {
    const top = this.gradientTop;
    const left = this.gradientLeft;
    const gradientRadius = this.isGradientVisible ? this.gradientRadius : 0;

    return {
      'height.px': gradientRadius,
      'width.px': gradientRadius,
      'top.px': top,
      'left.px': left
    };
  }
}