Concealing the Submit Button During Server Processing (Issues with Binding?)

My Angular 2 form is set up to send data to the server asynchronously. I want to provide users with visual feedback during the waiting period by changing the blue 'submit' button to a greyed-out 'Please wait...' button. To achieve this, I thought of using two buttons and toggling their visibility.

I initially tried adding this to my model:

isPending: boolean = false;

And then including this in my HTML page:

<button [hidden]="!isPending" type="submit" class="btn btn-primary">Register</button>
<button [hidden]="isPending" class="btn btn-primary" disabled>Please wait...</button>

However, both buttons always remain visible, regardless of the isPending value set.

Is there a more conventional way to achieve the desired outcome?

Answer №1

To fix the issue, simply swap out [hidden] for *ngIf as demonstrated below:

<button *ngIf="!isBusy" type="submit" class="btn btn-primary">Submit</button>
<button *ngIf="isBusy" class="btn btn-primary" disabled>Processing...</button>

The challenge arises because the class directives in your button elements take precedence over the hidden directive during execution.

Check out this Plunker link for usage examples

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

Script - Retrieve the content of the code element

I am currently developing an extension for VS Code that will enhance Skript syntax support. One challenge I am facing is the inability to select the body of the code block. Skript syntax includes various blocks such as commands, functions, and events, eac ...

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

How can one properly extend the Object class in JavaScript?

I have a scenario where I want to enhance a record (plain Javascript object) of arrays with additional properties/methods, ideally by instantiating a new class: class Dataframe extends Object { _nrow: number; _ncol: number; _identity: number[]; co ...

Some challenges encountered in Typescript/tslint

Just starting out with Typescript and trying basic annotations. First, having trouble with one of the imports. Second, unable to recognize type inside object destructuring. Third, facing issues with JSX implementation. Here is my code: import * as React ...

What is the best way to bring attention to a field that is outside the current viewport?

Is there a way to automatically scroll to the specific invalid field after clicking on submit in a large form, without having to manually search for it by scrolling through the page? ...

Utilize Angular to inject an input from a component directly into the header of my application

I am looking to customize my Pages by injecting various components from different Pages/Components into the header. Specifically, I want to inject an Input search field from my content-component into the header Component. I initially attempted to use ng-Co ...

Unable to successfully import { next } from the 'express' module using Typescript

Having some trouble with this line of code: import {response, request, next} from 'express' The typescript compiler in vscode is giving me the following error: Module '"express"' has no exported member 'next'. Up ...

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit ...

Ways to dynamically specify the boundary for cdkDrag in TypeScript

It's something I've been thinking about lately - is it possible to define a cdkDrag boundary in typescript? @Input() public container: any; constructor(public el: ElementRef, private dragDropService: DragDrop) { } ngAfterViewInit(): void { ...

"Encountering issues with running a MongoDB aggregate query involving date fields

I have been attempting to retrieve data from MongoDB using an aggregate query in Node.js for a specific date range. let date = '20230925' let year = date.slice(0, 4); let month = String(date.slice(4, 6)).padStart(2, '0'); ...

Exploring the NextPage type in Next.js

Could someone provide an explanation of the NextPage type within a Next.js TypeScript project? Most sources mention that it is used for type assignment in Next.js, but I am curious about its practical purpose. When and why should we utilize this type? Wha ...

Tips for resolving TS7022 issue within Vue Composition API

I encountered an issue while attempting to import a component in my file that generated the following error message: TS7022: 'default' implicitly has type 'any' because it does not have a type annotation and is referenced directly or in ...

Is it possible to transmit fixed routing information utilizing a path that can be customized with parameters?

Within my route definition, I am passing static data like this: const routes: Routes = [{ path: '/map', component: MapComponent, data: { animation: 'mapPage' } }]; To access this data ...

"Discover the step-by-step process of building a vue.js3 application with typescript, vue-router, and vuex without relying on

I have been assigned the task of developing a Vue3 application with TypeScript support using Vuex for state management and vue-router for basic routing. However, I am not allowed to use vue-cli for this project. Here is my current code: <head> & ...

What is the correct method for utilizing the async pipe in Angular 7 to effectively update the template?

One of my service methods is responsible for fetching dummy data and returning it as an observable. private dummySubject = new BehaviorSubject<Dummy>(null); dummy$ = this.dummySubject.asObservable(); loadDummyData(id: string): Observable<Dummy&g ...

Unable to compile Angular 5 using the AOT systemjs configuration

I've hit a roadblock in finding a solution to my issue. Maybe someone out there can lend me a hand. I'm in the process of upgrading from ng 4.4.4 to 5.0.1 and everything seems to be functioning fine in JIT mode. However, when attempting to compi ...

Elevate the placeholder in Angular Material 2 to enhance its height

I want to make material 2 input control larger by adjusting the height property of the input using CSS <input mdInput placeholder="Favorite food" class="search-grid-input"> .search-grid-input { height:30px!important; } As a result, the image o ...

Create a streaming service that allows for multicasting without prematurely ending the main subject

In my implementation of caching, I am utilizing BehaviorSubject and multicast. The cache stream should begin with an HTTP request and I want the ability to manually trigger a cache refresh by calling next on the subject. While the conventional method of us ...

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

I encountered an issue while using Angular 5, here is the code snippet : signIn(provider) { this._auth.login(provider).subscribe( (data) => { console.log(data); this.hideForm = false; this.emaill = data.email; ...

What is the best way to have Vue i18n fetch translations from a .json file during Unit Testing?

Previously, with vue-i18n (v8.25.0 and vue v2.6.14), I stored all translations in .ts files containing JS objects: import { LocaleMessages } from 'vue-i18n' const translations: LocaleMessages = { en: { test: 'Test', }, } expor ...