Learn how to dynamically activate an icon in Angular to enhance user interaction

HTML Code: The Zoom Component

 <div class="zoom py-3">
    <i nz-icon nzType="minus" (click)="zoomToggle(false)" nzTheme="outline"></i><br>
    <i nz-icon nzType="plus" (click)="zoomToggle(true)" nzTheme="outline"></i><br>
    <i nz-icon nzType="drag" [class.active]="zoomDrag" (click)="toggleZoomDrag()" nzTheme="outline"></i>
    <i nz-icon nzType="undo" (click)="zoomToggle(null, true)" nzTheme="outline"></i>
    <br><i nz-icon nzType="edit" [class.active]="editing" (click)="toggleEditing()" nzTheme="outline"></i>
  </div>

TypeScript Logic: Handling Zoom Functions

editing = false;
zoomDrag = false

toogleZoomDrag() {
 this.zoomDrag = !zoomDrag;
}

zoomToggle() {
 this.editing = !editing;
}

The issue arises when the icon move is clicked and becomes active. Subsequently, clicking the icon edit should deactivate the icon move.

For better clarity, here are examples:

https://i.sstatic.net/XEPcg.png

Clicking the icon move activates it. Then, clicking on editing results in deactivating the icon move.

https://i.sstatic.net/8KNXd.png

Upon clicking the icon move again while still editing, it should remain active as depicted in the second photo. However, clicking editing should deactivate both icons - replicating the desired behavior shown below.

https://i.sstatic.net/MJjNr.png

javascriptangulartypescript

Answer №1

modifying = false;
draggingZoom = false;

toggleDragZoom() {
 this.draggingZoom = !draggingZoom;
 this.modifying = false;
}

zoomSwitch() {
 this.modifying = !modifying;
 this.draggingZoom = false;
}

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

Examining for a TypeError with Typescript and Jasmine

In my current project, I am faced with the challenge of writing unit tests in Typescript for an existing library that was originally written in plain JS. Most of our page logic is also written in plain JS. Some functions in this library throw exceptions if ...

typescriptjasmine

I am unable to deliver an email to the mailbox

Whenever I try to send an email, I encounter an issue. In order to complete the registration process, a confirmation mail needs to be sent. The error message that I receive is: Callback must be a function at maybeCallback const fs = require(& ...

javascriptnode.js

Displaying concealed fields using the Bootstrap table detail formatter

I am attempting to create a customized detail formatter for my table, but I am encountering several fields with underscores, such as: _id: undefined _class: undefined _data: [object Object] This occurs when I click the plus button. <head> &l ...

javascriptajaxbootstrap-4bootstrap-table

Creating a TypeScript declaration file for a singular module

Consider the following directory structure: src/ ├── foo.ts ├── bar.ts ├── baz.ts ├── index.ts If foo.ts, bar.ts, and baz.ts each export a default class or object, for example in foo.ts: export default class Foo { x = 2; } I ...

typescriptnpmtype-declaration

How can I modify the border color within a div element?

My journey into web development is just beginning, and I've grasped the basics of Java, JSP, HTML, JS, CSS, and JQ. However, I've hit a roadblock while attempting to change the border color of a div upon mouse hover. Despite my efforts, I haven&a ...

javascriptjqueryhtmlcss

Encountered an error while running the `npx-create-react-app my-app` command in

When attempting to run 'npx create-react-app my-app', the following error message is displayed: 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Double check the spelling and path included to ...

javascriptnode.jsreactjsnpmnpx

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

I'm attempting to develop an edit form for modifying data fetched from a database based on its ID. Here is what I have tried: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/ ...

javascriptreactjstypescriptmaterial-ui

Closing a Javascript-created popup using server-side code

I'm encountering an issue with closing a modal that I've created in JavaScript. The goal is to display a loading spinner while data is being fetched, and then hide it once the background process is complete. Everything functions correctly until t ...

javascriptasp.netc#-3.0

Data within React/Next.js will remain unchanged even after a link has been clicked

When using Next.js and clicking on a Link, the new page URL will open as "/component/product". However, the product data is not updated in the Redux store. The page needs to be refreshed in order to update the state data. import Link from "n ...

javascriptreactjsnext.jsreduxreact-hooks

What could be the reason for the absence of the Froala editor display

I integrated the Froala editor into my Angular2 project but it doesn't seem to be visible on the screen, and there are no errors present. I made sure to import the necessary modules into app.module.ts, included jQuery in main.ts, and added the scripts ...

angularfroala

How to eliminate a div using jQuery

Within a repeater, there is a button that should remove the respective div followed by a database query using AJAX when clicked. The issue arises when attempting to remove the div in the success part of the AJAX call. Here is the code snippet: <asp:Up ...

javascriptasp.net

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Exploring ways to reach a specific digit level in JavaScript

As a newcomer to JavaScript, I've been searching online and trying different solutions but none have worked for me. Currently, I have a variable called num = 71.666666666 I'm looking to limit this number to 71.66 So far, I have attempted the f ...

javascripttruncation

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

javascriptjqueryhtmlcssfunction

Attempting to automatically invoke the API every minute, rather than relying on the user to reload the page

I currently have fetchCoins() in my mounted() function, which calls the API whenever a user refreshes. My goal is to call the API once, store the data in local storage, and then retrieve the data every minute. methods: { async fetchCoins() { con ...

javascriptvue.js

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...

javascripthtmljqueryshopify

Video margins within a webview

After numerous attempts to embed a YouTube video in a WebView, I'm still struggling with a persistent small margin on the right side of the video. I've researched similar issues and attempted to address it through JavaScript adjustments without ...

javascriptandroidvideowebviewandroid-webview

Is your preference selecting made a breeze by dragging the input field?

Looking to create a form that allows users to indicate their preference between Option A and Option B by dragging a slider. I know there must be a library out there that already does this, but I can't seem to figure out what it's called to searc ...

javascriptjquery

Is there a regular expression that can identify whether a string is included in a numbered list?

Struggling with creating a regular expression to determine if a string is part of a numbered list like those in word processors. Need it to return true only if the string starts with a number, followed by a full stop and a space. Easy for single or doubl ...

javascriptregex

Customizing the JavaScript code created by the "Change Variable by..." block in Blockly

I'm currently working on a Blockly Project where I am passing data from the blocks as JavaScript code. One of my goals is to make some adjustments to the output code in order to make it more user-friendly for beginners. While it is possible to modify ...

javascriptnode.jscode-generationblocklygoogle-blockly