Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS.

HTML

<div class="back">
   <div class="row">
      <div class="column">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" style="width:100%">
...
...

CSS

.back {
  background-color: var(--grey1);
  padding-bottom: 28px;
}

* {
  box-sizing: border-box;
}
...
...

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

TypeScript

export class PhotosComponent implements OnInit {

  random = Math.random(); //I am attempting to utilize this value in my CSS

  constructor() { }

  ngOnInit(): void {
  }

}

In an attempt to modify the rotation effect, I have explored using [ngStyle] in the HTML file. However, it seems that the rotation cannot be altered in this manner.

For reference, you can view a JSFiddle demonstration here: https://jsfiddle.net/6okvLu7a/

javascripthtmlcssangulartypescript

Answer №1

Here's a simple way to rotate an image using Angular:

//in .ts
rotateImage(){
   return {transform:'rotate('+Math.random()*360+'deg)',
           'transform-origin':'50% 50%'}
}
//in .html
<img src="https://picsum.photos/200/300" [ngStyle]="imageStyle" 
  (mouseout)="imageStyle=null" 
  (mouseover)="imageStyle=rotateImage()">

Alternatively, you can do it like this:

generateRotation(){
  return Math.random()*360+'deg'
}

//and in .html
<img src="https://picsum.photos/200/300" [ngStyle]="{transform:'rotate('+rotationAmount+')'}"
  (mouseout)="rotationAmount=null" 
  (mouseover)="rotationAmount=generateRotation()">

If you need to rotate multiple images, consider using a *ngFor loop and storing rotation values in an array for better organization.

Answer №2

If you're looking to connect your TypeScript file with a CSS class, give this code a try:

Let's say we have an element with the id "myDIV". You can link it to a CSS class like this:

const element = document.getElementById("myDIV"); element.classList.add("myClass");

Answer №3

Essentially, the CSS code remains fixed and cannot be altered dynamically unless you update it in real-time. However, if you define images in your CSS and assign classes to them such as 'class1', 'class2', etc., you can switch between them by using a randomly generated number that corresponds to your specified classes. Generate a random number between 0-10 and append it to 'class'.

Furthermore, you will need to link this functionality to the mouseover event, possibly utilizing @HostListener.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resolving a Tricky Challenge with jQuery's

I am facing an issue with a function that animates images through crossfading. This function is responsible for rotating banners on a website. By calling the function as animateSlideshow("play"), it starts animating and sets up a timeout. On the other hand ...

javascriptjquerysettimeout

Creating a service function (constructor) in JavaScript

When working with AngularJs and calling a service method: app.service('nameService', function() { this.Service = function (){console.log('hello')} } You can then use this service (object) like so: nameService.Service() My question is, ...

javascriptangularjs

Is it possible to utilize the WebGL camera in order to create dynamic transitions between various polygons?

Recently, a friend suggested exploring WebGL as an alternative to CSS transitions. I have a collection of polygons that form a 2D board game. https://i.sstatic.net/D0dnc.png In essence, the application moves the player space by space starting at the top ...

javascriptwebglperspectivecamera

Exploring the capabilities of TabrisJs in conjunction with Upnp technology

Working with Upnp in TabrisJs seems to be a bit challenging. Even though it has good support for node packages, I am facing difficulties while dealing with Upnp. I included node-upnp-client in my package.json file. "dependencies": { "tabris": "^2.0 ...

javascriptnode.jsupnptabristabris-js

"Enhance your website with powerful AJAX functionality using the October CMS

Can you help me troubleshoot this AJAX error I'm encountering when trying to call an AJAX action? The error message is indicating an 'Invalid handler name.' The correct format for the handler name should be "onEvent" I am attempting to u ...

javascriptjqueryajaxoctobercmsoctobercms-plugins

Autocomplete is failing to provide any results

I am experiencing an issue with the autocomplete script as it is not displaying any names under the input field. Below is the code snippet from my index file: <head> <html lang="en"> <meta charset="utf-8"> <meta na ...

javascriptphpjqueryajax

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Is there a way to alphabetically and numerically organize a table in vue.js?

Currently, I am implementing sorting functionality for a table using vue.js. While I have successfully achieved ascending sorting for numbers, I am facing challenges with getting the descending and alphabetical sorting to function properly. Below is the H ...

javascripthtmlsortingvue.js

How to effectively merge DefaultTheme with styled-components in TypeScript?

I am facing an issue with integrating a module developed using styled-components that exports a theme. I want to merge this exported theme with the theme of my application. In my attempt in theme.ts, I have done the following: import { theme as idCheckThe ...

javascriptreactjstypescriptstyled-componentstsx

Retrieve the values of two inputs from outside of the event

How can I access the values of two input fields in order to perform calculations as soon as their values are updated? <script> // Accessing the values of the two input fields for immediate calculation based on user input const heightInputEl = docum ...

javascriptinputevent-handling

The HTML table fails to refresh after an Ajax request has been made

I am currently utilizing Ajax to delete a row from the Roles table. The functionality allows the user to add and delete roles using a link for each row. While the deletion process works properly and removes the row from the database, the table does not get ...

javascriptjqueryhtmlasp.net-mvc

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

I'm encountering an issue while trying to integrate authentication using firebase (via Google) in my next.js application, and the app crashes consistently. I will provide the code for the auth.js page component, as well as where I set up firebase and ...

javascriptfirebaseauthenticationnext.jsfirebase-authentication

Modifying the dimensions of a text input box within an HTML string using React

I'm currently utilizing a popup library called sweetalert2-react-content to generate a popup box with a textbox and a text area. Even though the elements are being created successfully, I am struggling to adjust the size of the text area in the popupb ...

htmlreactjs

Angular mobile navbar experiencing collapse issue

I am working on an Angular project that does not include Jquery. I am trying to implement a navbar using mdbootstrap, but I am encountering issues with the collapse feature not working properly. Below is the HTML content I am using: <header> < ...

htmlangularmdbootstrap

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

how to choose the :after pseudo-element with jQuery

Below are the codes I have tried. When this popup appears, I want to be able to close the entire popbox using the close button. CSS code .bigdiv{ display:none; background-color:#efefef; box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4); ...

javascriptjqueryhtmlcss

Rendering SVG graphics on browsers for Android devices

I've been struggling with an issue for quite some time now and I can't seem to find a solution. The problem lies in having an SVG image as a CSS background on the top left corner of a div. Instead of seamlessly merging with the div background, i ...

androidhtmlcsssvg

Exploring the implementation of enums in a separate file with Angular Ahead-Of-Time compilation

Converting a well-functioning JIT-based scenario angular-based app (angular-cli) to an AOT-based scenario. The AOT-build is successfully running. Upon opening the resulting webpage, I am encountering errors stating 'Cannot read property 'none&ap ...

angularangular-cliangular-aot

What is the best way to limit a slash command to only be accessible to those with specific roles on a Discord server?

I am currently working on a discord bot using Discord.js V14 and implementing a command called "claimticket". However, I am facing an issue where I need to restrict this command to only members who possess one of the two specific roles that I have mentione ...

javascriptdiscorddiscord.js

Iterate through the complex array of nested objects and modify the values according to specified conditions

I am currently iterating through an array of objects and then delving into a deeply nested array of objects to search for a specific ID. Once the ID is found, I need to update the status to a particular value and return the entire updated array. Issue: Th ...

javascriptangulartypescript