disabling swap button icons temporarily in Angular 16

I need assistance creating a function that removes an icon from a button and replaces it with a spinner provided by primeng. The function should only remove the child element.

Code snippet for the button:

<p-button label="" [loading]="loading" (onClick)="load()" (onClick)="rm()">
  <i id="rm_icon" class="pi pi-user-plus"></i>
</p-button>

The rm() function is intended to remove the existing icon from the button, but only when the loading spinner icon is presented.

I am looking for a way to remove the icon temporarily while the spinner is displayed, as I currently only know how to remove it permanently. My TypeScript skills are limited in this area.

javascriptangulartypescript

Answer №1

After some investigation, I was able to find the solution I was looking for. By implementing a simple if condition, I was able to dynamically add or remove an icon based on whether a certain condition is true or false.

<p-button [icon]=" loading ?   'pi pi-spinner pi-spin' : 'pi pi-user-plus'"
label="Add" (onClick)="load()" > </p-button>

In TypeScript:

loading: boolean = false;

load() {
    this.loading = true;

    setTimeout(() => {
        this.loading = false
    }, 2000);
}

}

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

Error encountered during an object casting operation at runtime

I am currently tackling a project in Typescript. Even though the code compiles without errors and adheres to all theoretical principles, it fails to function correctly at Runtime. The root cause of this issue lies in the fact that TypeScript is transpil ...

typescriptgenericsinterfacecasting

Set up a unique database in memory for every individual test

Is it feasible to create an in-memory database for each test scenario? My current approach involves using the code snippet below, which functions properly when running one test file or utilizing the --run-in-band option. import _useDb from "@/useDb&q ...

typescriptsqlitejestjstypeorm

Verifying the format of an object received from an HTTP service using a TypeScript interface

Ensuring that the structure of the http JSON response aligns with a typescript interface/type is crucial for our javascript integration tests against the backend. Take, for example, our CurrentUser interface: export interface CurrentUser { id: number; ...

javascripttypescript

The set interval function in JavaScript does not properly call PHP in Internet Explorer

I'm currently implementing code to display the updated message from the database. Here is what I have so far: var showtime = setInterval('redirect()',5000); ////Redirecting to DB Status ///// function redirect() { xmlhttp = GetXmlHttpOb ...

phpjavascriptmysqlajax

FormArray in reactive forms with draggable formGroups

Within the angular drag-drop module, there is documentation available for the moveItemInArray() function which allows dragging content within an array. However, how can we shuffle (formGroups/formControls) in formArray? I attempted to use the moveItemInFo ...

angulardrag-and-dropangular-cdk

Setting npm command line options from package.json file

As stated in the npm documentation, the --color cli flag can be used to disable colors in the console, which works well when used in the command line. However, I was under the impression that I could also set it in the package.json file, but it seems to ha ...

javascriptjsonnode.jsnpm

React TSX file not recognizing JSON data stored in an HTML data attribute

I am having some trouble with implementing the password toggle component from the Preline UI. Here is how the component looks: "use client" import React, { ChangeEvent, MouseEventHandler, useEffect } from "react"; export default functi ...

javascripthtmlreactjstypescriptnext.js

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

evaluation is not being executed in javascript

I am struggling to assign a value of 1 to the educationflag variable. I am trying to avoid calling the enableEdit.php file when the flag is set to 1. The issue arises when control reaches the if condition but fails to set the variable to 1. Here is my cod ...

javascriptjqueryajaxeval

Click on a row in ReactTable to toggle the background color or expand the row

Is there a way to toggle the row background color in ReactTable when it is expanded? I have tried using onExpandedChange but haven't had any success. Any suggestions on how to achieve this would be greatly appreciated. Thank you! https://i.sstatic.ne ...

javascriptreactjsreact-table

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Currently facing an issue with Typescript that I'm stuck on. I have created a named callback Handler class that receives the allowed list of "events"/"handlernames" as a generic: class NamedHandler<H extends { [key: string]: HandlerFunction }> ...

typescripttypescript-generics

Having trouble getting the onClick function to work in your Next.js/React component?

Recently, I delved into using next-auth for the first time and encountered an issue where my login and logout buttons' onClick functions stopped working when I resumed work on my project the next day. Strangely, nothing is being logged to the console. ...

reactjstypescriptnext.jsnext-auth

Tips for making jQuery maphilight function properly?

Can someone assist me with Mapilight? I have been trying to get it to work but no success so far. Here are the script links in the head section of my HTML. <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/ja ...

javascriptjqueryhtmlmaphilight

Trouble with mobile compatibility for .json file content population in HTML elements script

Check out THIS amazing page where I have a series of placeholders for phone numbers in the format: 07xxxxxxxx. By simply clicking the green button "VEZI TELEFON", each placeholder in the green boxes gets replaced with a real phone number from a JSON file u ...

javascriptjqueryjson

Implementing setDoc with Firebase-Admin using Typescript in Firestore

I'm having issues with my code in config/firebase.ts: import { initializeApp, cert } from 'firebase-admin/app'; import { getFirestore } from 'firebase-admin/firestore' const firebaseAdminApp = initializeApp({ credential: cert( ...

javascripttypescriptgoogle-cloud-firestorefirebase-admin

What is the correct method for adding a button to a popup in Leaflet Draw?

I need a button within a popup that can perform an action on the attached layer. L.marker(coors[i], { icon }) .addTo(this.drawnItem) .bindPopup(this._getCustomIcon(mix)) .openPopup(); Here is my _getCustomIcon() function: ...

javascriptreactjsleafletleaflet-draw

Utilize PHP within an HTML form for action without causing a redirection

I am working on an HTML form that looks like this: <form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php"> On the form, there is a submit button that triggers the verify() function: <a href="#" class="button1" onClick="v ...

javascriptphphtmlforms

Is there an equivalent function to onAdd in Material-UI when using MUI Chip?

In my exploration of the latest version of Material-UI, MUI, I observed that the "onAdd" property has been removed. The only function properties remaining are "onDelete" and "onClick". I am interested in generating new chips based on user-input tags. Is ...

javascriptreactjsmaterial-uifrontend

Obtaining specific information about the target item that a source item was dropped on (using ng2-dragula in Angular)

Issue: I need assistance in implementing the following functionality using the ng2-dragula drag behavior. I am working on creating a feature similar to the app-launcher found on iOS and Android devices. I aim to drag an item A and drop it onto anothe ...

angulartypescriptng2-dragula

How to Retrieve the Index of a Value within an Array in VUE.js

I am facing an issue where I want to update the status of tasks based on a certain method call. However, the challenge lies in obtaining the index of the specific item within the array in order to modify its status. Here is my HTML setup: <div class="m ...

javascriptarrayssortingvue.jsvuejs2