Enhance the functionality of angular-material buttons by incorporating dynamic loading animations into

I am currently working on a solution in Angular 12 to disable a button (and show a spinner) when it is clicked, until the API responds.

To achieve this, I plan to follow a similar approach to the angular-material button implementation. Essentially, I want to use an attribute selector for a custom button-component and apply it to the button element.

The simple code snippet below functions as expected, however, when adding the 'app-button-loading' alongside the mat-raised-button, the application crashes with an NG0300 error: Error: NG0300: Multiple components match node with tagname button.

  <button app-button-loading color="primary"> Click me! </button>

Please note that if app-button-loading were a Directive, it would work perfectly fine.

I also tried to specify the material selectors, but it doesn't seem to resolve the issue:

selector: "button[mat-button][app-button-loading], button[mat-raised-button][app-button-loading]"

I found a satisfactory solution using a Directive instead of a Component with an attribute selector (dynamically creating a mat-spinner component), and it works well. However, I wish to add some styles without including them in the global styles.scss.

TL;DR; Is it feasible to include a Component with an attribute selector along with the material selector mat-raised-button (or any other)? Or does Angular not permit the usage of Components in this manner?

<button mat-raised-button app-button-loading color="primary"> Click me! </button>

Additionally, I have developed a simplified demo on stackblitz which might be helpful.

angulartypescriptangular-material

Answer №1

In Angular 12, I am working on a solution to disable a button (and show a spinner) when clicked until the API responds.

If you're trying to achieve this, you can simply use the mat-spinner component (search for Mat Spinner on Google). Your button implementation will look like this:

<button mat-button [disabled]="apiLoading">
 <mat-spinner *ngIf="apiLoading"></mat-spinner>
 <span *ngIf="!apiLoading">Click Me</span>
</button>

Make sure to have a boolean variable named apiLoading in your TypeScript file that is toggled when the API call starts.

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

What's the significance of & in TypeScript and JavaScript?

While exploring someone else's code, I came across this interesting piece related to the props of a React component. Although I'm aware that & is typically used as an AND logical operator, it seems to have a different significance in this con ...

javascriptreactjstypescriptobject

Tips for utilizing generics to determine the data type of a property by its name

I am seeking a method to determine the type of any property within a class or a type. For instance, if I had the classes PersonClass and PersonType, and I wanted to retrieve the type of the nationalId property, I could achieve this using the following cod ...

typescriptgenericstypescript-typings

Having difficulty properly streaming UI components with Vercel's AI-SDK

Recently, I've been diving into the new Vercel's AI-SDK to expand my skills. My current project involves developing a persona generator that takes specific guidelines as inputs and generates persona attributes according to a given Zod schema. B ...

javascriptreactjstypescriptnext.jsvercel-ai

Spartacus has the capability to extend or override the PageType enum within the cms.model framework

I am facing a dilemma similar to the Spartacus situation. In brief, I am required to modify the PageType enum in cms.model by either overriding or extending it. The current enum consists of four values (content, product, category, catalog) and I must incl ...

angulartypescriptenumssap-commerce-cloudspartacus-storefront

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

import { EmailTemplate } from "@/components/email-template"; import { Resend } from "resend"; const resend = new Resend("myApiKey"); // this works only in dev // const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KE ...

javascriptreactjstypescriptnext.jsresend.com

What is the best way to save data from a Firebaselistobservable into an array?

I've been attempting to transfer data from Firebase to an array using Angular 2, but I'm facing difficulties in pushing the data into the array. Below is the code snippet: Variables: uid: string = ''; agencyItems: FirebaseListObserva ...

arraysangulartypescriptfirebase

Error in typing on a prismic application utilizing a ContentRelationshipField

I am facing a type error in my Prismic Next.js application that I am struggling to resolve. While the app functions properly, I keep encountering type errors like the following: The property 'data' does not exist on the type 'ContentRelati ...

javascripttypescriptnext.jstypingprismic.io

Can a TypeScript file be created by combining a declaration file and a .js file?

It is commonly understood that declaration files are typically used for libraries rather than projects. However, let's consider a scenario where an existing JavaScript project needs to be migrated to TypeScript by creating d.ts files for each source ...

javascriptreactjstypescriptdeclaration-files

Backend external login without password feature in .NET Core ABP 6.0 for users

Currently, I am working on a project that involves utilizing ABP 6.0 native backend (.NET Core 6 with IdentityServer) and a non-native angular frontend project with ABP installed for the static proxy tool. I am encountering difficulties in implementing Goo ...

angularasp.net-coreauthenticationabpabp.io

Using Webpack 4 and React Router, when trying to navigate to a sub path,

I'm currently working on setting up a router for my page, but I've encountered a problem. import * as React from 'react'; import {Route, Router, Switch, Redirect} from 'react-router-dom'; import { createBrowserHistory } from ...

reactjstypescriptwebpackreact-router

What is the process for defining functions with distinct data types while allowing variables to have multiple data types?

I am facing a declaration issue - or rather, a challenge in comprehending Typescript. Let me illustrate the scenario: public migrationSource: Skater | Rink; public migrationDestination: Skater | Rink; public migrationMode: MigrationMode; ngOnInit() { ...

angulartypescripttypescript-generics

Implementing content projection or transclusion without the need for wrapper elements

Trying to include content inside a component (<parent>) with multiple <ng-content> slots but avoiding the need for a containing element for the child. This is necessary because the parent layout utilizes flexbox, and it's important to mak ...

angular

Find the object in the array that has a name that is a combination of

I am facing an issue in implementing TypeScript validation for filtering an array. I have a specific array of actions and I want to filter out internal actions from it. Despite my efforts, I am unable to properly communicate to TypeScript that the filtered ...

arraystypescriptfilter

Identify when the user ceases typing in Angular 2

I am currently working on implementing a feature that detects whether the user is typing or not. I need to determine when the user has stopped typing for at least 3 seconds in order to perform certain actions. I have successfully detected when the user sta ...

angulartypescript

Cypress - AG-Grid table: Typing command causing focus loss in Cell

Encountering a peculiar issue: I am attempting to input a value into the cell using 'type()'. My suspicion is that each letter typed causes the focus on the cell to be lost. It seems that due to this constant loss of focus and the 'type()& ...

typescriptautomated-testscypressag-gridlost-focus

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package. Tried importing the library into my project using the following code snippe ...

javascriptangulartypescripterror-lognuxeo

Troubleshooting a dynamically loaded Angular 2 module in Chrome and VS Code

Currently, I am utilizing WebPack in conjunction with Angular 2/4 and incorporating modules that are lazy loaded. Due to this setup, the components and modules are not included in the primary .js file; instead, their code is distributed across files genera ...

angularwebpacklazy-loading

Looking to organize, refine, and establish a default value with the help of rxjs

In my Angular application, I have an observable that is linked to a reactive forms dropdown control. My goal is to filter, sort, and display the default value. I've created two separate implementations - one for filtering and sorting without displayin ...

angularangular-reactive-forms

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

htmlangular

It appears that tsc is failing to recognize the "exclude" directives specified in the tsconfig.json file

I'm having difficulty with tsc recognizing my tsconfig.json file and compiling my .ts files. I keep encountering duplication errors that I'm trying to prevent using my tsconfig.json. Here's what I have: package.json tsconfig.json typings.j ...

typescriptangulartsc