Angular directive: Changing image background dynamically when hovered upon

Question

Angular directive: Changing image background dynamically when hovered upon

From the screenshot provided, it is clear that there is a background image for the page and two thumbnails positioned below the text. The objective is to dynamically change the background image of the page to match the thumbnail image when the mouse hovers over the thumbnail.

The code snippet below shows a directive that attempts to achieve this functionality. The main challenge faced is injecting the thumbnail image source into the element to update the page background. Additionally, an error message indicating "Expected 2 arguments, but got 1" is encountered while using the ViewChild method.

import { Directive, ElementRef, HostListener, ViewChild } from '@angular/core';

@Directive({
  selector: '[dynamicBackgroundImg]'
})
export class DynamicBackgroundImgDirective {
  thumbSRC : string;
  @ViewChild('tourBackgroundImg') tourBackgroundImg:ElementRef;


  constructor(private el: ElementRef) {}

  @HostListener('mouseover') onMouseOver() {
    this.ChangeBackgroundImg();
  }

  @HostListener('mouseleave') onMouseLeave() {

  }

  ChangeBackgroundImg() {
    this.thumbSRC = this.el.nativeElement.getAttribute('src');
    alert(this.thumbSRC);
    this.tourBackgroundImg.nativeElement.setAttribute(this.thumbImgSrc);
  }

}

Here is a condensed version of the corresponding HTML code:

<section class="tours-section" [ngClass]="{ 'load-complete' : viewPage }">
  <img class="component-loader" src="../../../assets/icons/loading.svg">
  <div class="tours-wrapper">
    <div class="tours-right page-title">
      <p>{{pageTitle}}</p>
      <picture>
        <source srcset="{{ toursImageUrl }}?fm=webp" type="image/webp">
        <source srcset="{{ toursImageUrl }}?fm=png" type="image/png">
         <!-- The following tag controls the background image of the page, and should be dynamically updated based on the thumbnail image being hovered over. -->
        <img src="{{ toursImageUrl }}?fm=png" alt="{{ toursImageAlt }}" (load)="imageLoaded()" class="section-background" tourBackgroundImg>
      </picture>
    </div>
    <div class="tours-left">
        <div class="tours-thumbs">
          <div class="tours-container">
            <!-- When a user hovers over a thumbnail, the goal is to extract and use the src of the tour image -->
            <figure class="tour-image-small">
              <picture>
                <img src="assets/images/L1000433-min.JPG" alt="" dynamicBackgroundImg>
                <figcaption></figcaption>
              </picture>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Here is a link to a screenshot for better visualization of the desired outcome:

https://i.sstatic.net/T2FmI.jpg

Any insights or suggestions on a different approach to achieving this functionality would be greatly appreciated.

angular typescript angular-directive

Answer 1

Answer №1

There is a more efficient way to achieve the desired functionality in your directive without the need for @ViewChild.

Consider the following streamlined code:

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

@Directive({
  selector: '[dynamicBackgroundImg]'
})
export class DynamicBackgroundImgDirective {
  @Input() target: HTMLImageElement;

  constructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2) {}

  @HostListener('mouseover') onMouseOver() {
    this.ChangeBackgroundImg();
  }

  @HostListener('mouseleave') onMouseLeave() {

  }

  ChangeBackgroundImg() {
     this.renderer.setAttribute(this.target, 'src', this.el.nativeElement.src);
     this.renderer.addClass(this.target, 'fade-in');
  }

}

In your component template, define the target image using a template variable and bind the dynamicBackgroundImg directive to it to trigger the image change on hover:

<img src="{{ toursImageUrl }}?fm=png" alt="{{ toursImageAlt }}" (load)="imageLoaded()" class="section-background" #tourBackgroundImg>

....

<img src="assets/images/L1000433-min.JPG" dynamicBackgroundImg [target]="tourBackgroundImg">

If you encounter the error Expected 2 arguments, but got 1 related to ViewChild, ensure you are utilizing Angular 8 and pass a configuration object as shown:

@ViewChild('element', { static: false })

For Angular animations or a simple CSS fade effect on the image, you can apply the following styles:

.fade-in {
  animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

The directive now includes functionality to add the fade-in class when hovering over the thumbnail image.

Answer 2

There is a more efficient way to achieve the desired functionality in your directive without the need for @ViewChild.

Consider the following streamlined code:

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

@Directive({
  selector: '[dynamicBackgroundImg]'
})
export class DynamicBackgroundImgDirective {
  @Input() target: HTMLImageElement;

  constructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2) {}

  @HostListener('mouseover') onMouseOver() {
    this.ChangeBackgroundImg();
  }

  @HostListener('mouseleave') onMouseLeave() {

  }

  ChangeBackgroundImg() {
     this.renderer.setAttribute(this.target, 'src', this.el.nativeElement.src);
     this.renderer.addClass(this.target, 'fade-in');
  }

}

In your component template, define the target image using a template variable and bind the dynamicBackgroundImg directive to it to trigger the image change on hover:

<img src="{{ toursImageUrl }}?fm=png" alt="{{ toursImageAlt }}" (load)="imageLoaded()" class="section-background" #tourBackgroundImg>

....

<img src="assets/images/L1000433-min.JPG" dynamicBackgroundImg [target]="tourBackgroundImg">

If you encounter the error Expected 2 arguments, but got 1 related to ViewChild, ensure you are utilizing Angular 8 and pass a configuration object as shown:

@ViewChild('element', { static: false })

For Angular animations or a simple CSS fade effect on the image, you can apply the following styles:

.fade-in {
  animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

The directive now includes functionality to add the fade-in class when hovering over the thumbnail image.

Answer 3

Answer №2

If you're looking to dynamically change the background image when hovering over an image, you can achieve this by using an event listener.

Here's an example code snippet:

HTML:

<div class="app-component">
  <h1>App Component</h1>
  hover the image below to change the background:<br>
  <img #myImage src="https://picsum.photos/200/300"/>
</div>

CSS (Setting up the image change):

.app-component {
  background-image: url("https://img.maxisciences.com/s3/frgsd/1024/coronavirus/default_2020-02-28_2bbef01b-f63a-4a59-b31e-788da4e402bb.jpeg");
}

And TypeScript:

import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  Renderer2,
AfterViewInit
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("myImage") myImage: ElementRef;
  globalInstance: any;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {

    this.globalInstance = this.renderer.listen(
      this.myImage.nativeElement,
      "mouseover",
      () => {
        this.renderer.setStyle(
          document.body.querySelector('.app-component'),
          "background-image",
          `url(${this.myImage.nativeElement.src})`
        );
      }
    );
  }
}

By binding and listening to the 'mouseover' event on the image, you can dynamically change the background of your target element when the event is triggered.

Answer 4

If you're looking to dynamically change the background image when hovering over an image, you can achieve this by using an event listener.

Here's an example code snippet:

HTML:

<div class="app-component">
  <h1>App Component</h1>
  hover the image below to change the background:<br>
  <img #myImage src="https://picsum.photos/200/300"/>
</div>

CSS (Setting up the image change):

.app-component {
  background-image: url("https://img.maxisciences.com/s3/frgsd/1024/coronavirus/default_2020-02-28_2bbef01b-f63a-4a59-b31e-788da4e402bb.jpeg");
}

And TypeScript:

import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  Renderer2,
AfterViewInit
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("myImage") myImage: ElementRef;
  globalInstance: any;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {

    this.globalInstance = this.renderer.listen(
      this.myImage.nativeElement,
      "mouseover",
      () => {
        this.renderer.setStyle(
          document.body.querySelector('.app-component'),
          "background-image",
          `url(${this.myImage.nativeElement.src})`
        );
      }
    );
  }
}

By binding and listening to the 'mouseover' event on the image, you can dynamically change the background of your target element when the event is triggered.

Angular directive: Changing image background dynamically when hovered upon

Answer №1

Answer №2

Similar questions

Retrieve all articles from a user using the TypeORM - findAll function

Customizing Components in Angular 2/4 by Overriding Them from a Different Module

Utilize Firestore for automatic saving of data from Angular Reactive Forms

Can a TypeScript interface be exported as the result of a function?

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

How to apply dynamic values for filtering in TypeScript?

Difficulty with two-dimensional arrays in Angular and Typescript

The method JSON.stringify is not properly converting the entire object to a string

Create a chronological timeline based on data from a JSON object

Angular progressive web applications (PWAs) continuously fluctuating in their stability,

Having trouble getting the Typescript overload arrow function to function properly

Unable to utilize the useState hook in TypeScript (Error: 'useState' is not recognized)

Developing advanced generic functions in Typescript

Utilize React to display a Selected button within a whitespace

Exploring the power of chaining multiple subscriptions in RxJs 6

TS2349 emerges when incorporating lazy-loading in React

Enhancing Code Completion Feature for Multiline Strings in Visual Studio Code

The information from the data source is not getting filled in

Executing JavaScript file using TypeScript code in Node.js

Encountering a 404 error with Angular 6 routing after refreshing the page when using an Nginx proxy