How to utilize the CSS hover feature within an Angular directive?

Question

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive.

import { Directive, Input, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[newBox]'
})
export class BoxDirective {

  @Input() backgroundColor = '#fff';
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', this.backgroundColor);
  }

}

I am now looking to dynamically change the background color on hover using this directive. How can I achieve this?

css angular angular2-directives angular-directive

Answer 1

Answer №1

Implement HostListener for event monitoring


  @HostListener('mouseover')
  onMouseOver() {
    this.backgroundStyle = '#fff';
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.backgroundStyle = '#000';
  }

Answer 2

Implement HostListener for event monitoring


  @HostListener('mouseover')
  onMouseOver() {
    this.backgroundStyle = '#fff';
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.backgroundStyle = '#000';
  }

Answer 3

Answer №2

import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHover]'
})
export class HoverDirective implements OnInit {
  @HostListener('mouseenter') onMouseEnter(){
    this.renderer2.setStyle(this.elRef.nativeElement,'fontSize','100px')
    this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
    this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
  }
@Input('appHover') style:string='';
  @HostListener('mouseout') onMouseOut(){
    this.renderer2.setStyle(this.elRef.nativeElement,'fontSize',this.style)
    this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
    this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
  }

  constructor(private elRef:ElementRef,private renderer2:Renderer2) { }
  ngOnInit(): void {
  
  }
  
}

proceed to app.component.html


then apply the directive.

Answer 4

import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHover]'
})
export class HoverDirective implements OnInit {
  @HostListener('mouseenter') onMouseEnter(){
    this.renderer2.setStyle(this.elRef.nativeElement,'fontSize','100px')
    this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
    this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
  }
@Input('appHover') style:string='';
  @HostListener('mouseout') onMouseOut(){
    this.renderer2.setStyle(this.elRef.nativeElement,'fontSize',this.style)
    this.renderer2.setStyle(this.elRef.nativeElement,'color','#fff')
    this.renderer2.setStyle(this.elRef.nativeElement,'backgroundColor','orange')
  }

  constructor(private elRef:ElementRef,private renderer2:Renderer2) { }
  ngOnInit(): void {
  
  }
  
}

proceed to app.component.html


then apply the directive.

How to utilize the CSS hover feature within an Angular directive?

Answer №1

Answer №2

Similar questions

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Is it possible to switch between mat-checkbox and mat-radio-button within an Angular reactive form?

Modify CSS using Javascript by targeting the class of ".modalDialog > div {}"

Angular web application can retrieve JSON data from a web API controller, allowing for

CSS - stacking containers vertically with scrollbars

How can I use CSS to transform a "+" symbol to an "x"?

Ways to Export HTML to Document without any borders or colorful text

Execute the function upon clicking

Blending HTML template and WordPress PHP file

I am experiencing an issue where notifications are not appearing on my Ionic 3 device

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

Challenges arise with CSS alignment when adding d3.js charts to a webpage

What are the best ways to utilize dynamic CSS on a smartphone browser for optimal performance?

Ways to prevent the use of the JavaScript increment (++) or decrement (--)

Build an Angular wrapper component for the phone textbox functionality

Rearranging data received from an Observable

Content overflowing beyond the boundaries of the parent DIV in Internet Explorer 6

If the SASS condition matches the variable for the background color, then

Experiencing issues with the redirect button on the navigation bar of my website

Problem with input field borders in Firefox when displayed within table cells