Html - Angular - Dynamic text gradient

GriffinMoyer
August 2, 2023
177 views
0 votes
2 Answers

I am attempting to dynamically change the gradient background of some text in Angular.

My current code is as follows:

home.component.html

<div class="name" [style.background]="gradient" 
    [style.-webkit-background-clip]="'text'"
    [style.background-clip]="'text'">Text Here</div>

home.component.sass

.name
    color: transparent
    font-family: Tahoma, sans-serif
    background: #FA8BFF
    background-clip: text
    -webkit-background-clip: text

home.component.ts

...
gradient : string = "linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)";

ngOnInit(): void {
  addEventListener("mousemove", (event) => {
    var angle = this.mouseAngle(event.clientX, event.clientY);
    this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`
  })
}
...

This works as expected when the page is loaded, but the instant that I trigger the mousemove event, the text turns into a square for the rest of the time the page is active.

How do I properly apply a dynamic gradient background to my Angular element?

Answers

One way is use @HostListener. which is preferred by angular docs.
stackblitz

 gradient: string ='linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)';

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(e: any) {
    var angle = this.mouseAngle(e.clientX, e.ClientY);
    this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`;
  }

  mouseAngle(X: any, Y: any) {
    ...
  }

Use Renderer2. It help us to manipulate the DOM. stackblitz

  gradient: string = 'linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)';
  mouseFunc: any;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.mouseFunc = this.renderer.listen('document', 'mousemove', e => {
    var angle = this.mouseAngle(e.clientX, e.ClientY);
    this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`;
    });
   }

   mouseAngle(X: any, Y: any) {
    ...
   }

OR you can use the reactive way RxJS, I love this one stackblitz


  gradient: string = 'linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)';
  subscription!: Subscription;

  ngOnInit() {
    this.subscription = 
         fromEvent(document, 'mousemove')
                           .subscribe((e:any) => {
                            var angle = this.mouseAngle(e.clientX, e.ClientY);
                            this.gradient = `linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`;
                           });
  }
  


  mouseAngle(X: any, Y: any) {
    ...
  }

Hope it help you.

Use (see the "text" before linear-gradient)

gradient : string = "text linear-gradient(270deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)";

  addEventListener("mousemove", (event) => {
    var angle = this.mouseAngle(event.clientX, event.clientY);
    this.gradient = `text linear-gradient(${angle}deg, #FA8BFF 0%, #2BD2FF 42%, #2BFF88 90%)`
  })

And

<div class="name" [style.background]="gradient">Text Here</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Angular – Dynamic text gradient

Answers