How to pass variable to css in Angular

Question

I am running angular app, I calculate width of element and store it under variable finalposition and I want to move to left (finalposition)px. I want this style property to be applied only on hovering over the element. How to do this?

component.ts


 ngAfterViewChecked(): void {
    this.finalposition = document.getElementById('spandiv').offsetWidth;
  }

component.html


  <input id="inputCustome" type="text">
  <p id="spandiv">xyzkskssss</p>

component.css

#inputCustomer {
  text-align: center;
  position: relative;
  bottom: 7px;
  left: 2px;
}


#spandiv {
  position: absolute;
  right:145px;
  top: 40px;
  background-color: #6B6664;
  padding: 5px;
  color:white;
  font-weight: normal;
  display: block;
  opacity:0;
  overflow: hidden;

}


 #inputCustomer:hover + #spandiv {
  position: absolute;
  left: var(--finalPosition*2)+ "px"; // this value is not getting picked up
  top:40px;
  display: inline;
  opacity:1;

}

Hi, How to apply ngStyle only on hovering

karansys
– karansys

2019-12-05 17:42:04 +00:00
Commented Dec 5, 2019 at 17:42 — karansys
– karansys, Commented Dec 5, 2019 at 17:42
Have you tried the solution?

Adrita Sharma
– Adrita Sharma

2019-12-06 06:23:47 +00:00
Commented Dec 6, 2019 at 6:23 — Adrita Sharma
– Adrita Sharma, Commented Dec 6, 2019 at 6:23

Adrita Sharma · Accepted Answer · 2019-12-06 06:23:28Z

6

You can use (mouseenter) and (mouseleave) to set finalPosition value.

Try:

<input id="inputCustome" type="text" (mouseenter)="finalPosition = finalPosition * 2" (mouseleave) ="finalPosition = finalPosition /2">
<p id="spandiv" [style.left]="finalPosition + 'px'" >xyzkskssss</p>

or

<input id="inputCustome" type="text" (mouseenter)="finalPosition = finalPosition * 2" (mouseleave) ="finalPosition = finalPosition /2">
<p id="spandiv" [ngStyle]="{'left': finalPosition + 'px'}" >xyzkskssss</p>

Demo

edited Dec 6, 2019 at 6:23

answered Dec 5, 2019 at 17:43

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Redhu · Accepted Answer · 2019-12-05 18:08:12Z

1

You can leverage the power of Angular directive to do this kind of stuff. You can also use the Angular events such as mouseover, mouseenter. For eg.

<input id="inputCustome" type="text" (mouseover)="onMouseOver()">

or You can use the directive like

<div styleHover >Hover me</div>


@Directive({
  selector: '[styleHover]'
})
export class StyleOnHover {

  constructor(private el: ElementRef) {}

  @HostListener('mouseover') onHover(e) {
    console.log(e)
    console.log(this.el);
    // this.el.style => change the property
  }
}

answered Dec 5, 2019 at 18:08

Arun Redhu

1,59913 silver badges16 bronze badges

1 Comment

Christopher Marshall Over a year ago

I like this approach a lot.

danday74 · Accepted Answer · 2024-06-09 01:11:05Z

1

To pass controller variables to SCSS files follow this approach, using CSS variables within the SCSS file

TS

constructor(private ref: ElementRef) {}

ngOnInit() {
  this.initCssVars()
}

private initCssVars() {
  const el = this.ref.nativeElement
  el.style.setProperty('--circle-color', this.circleColor())
}

SCSS

.my-class {
  color: var(--circle-color);
}

answered Jun 9, 2024 at 1:11

danday74

58k56 gold badges273 silver badges337 bronze badges

Collectives™ on Stack Overflow

How to pass variable to css in Angular

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related