Closing a modal using the Enter key in Angular 6

I was able to replicate the issue on StackBlitz using minimal code.

To reproduce:

  • Step 1: Input a word in the text field and press Enter on the keyboard.
  • Step 2: A modal will pop up.
  • Step 3: Hit Enter again on the keyboard.

During Step 2, I encountered the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

Although Step 3 is supposed to close the modal, it actually reopens it. However, clicking on the confirm button with the mouse does properly close the modal.

angulartypescript

Answer №1

The problem lies in the fact that you have a modal open triggered by the enter event. When you press enter on the confirm button, it closes the modal but also triggers the event associated with your text box.

(keyup.enter)=

So essentially, when you press enter, the modal closes first, then the input box event fires, and finally, the modal opens again based on the logic. To confirm this, you can change your event to just keyup. This way, every key press will result in the same issue you mentioned for the enter key.

(keyup)=

Answer №2

If you encounter an ExpressionChangedAfterItHasBeenCheckedError, one solution is to move the code responsible for changing the value inside a setTimeout function.

    setTimeout(() => {
      // Code that modifies the property value
   },0);

Answer №3

To solve this problem, consider adding a flag and switching it on and off as needed.

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: Angular variable is undefined when using template-driven validation

When I create a form using a template-driven approach and submit it, an error occurs stating that all form fields are undefined. The form consists of five fields, and I attempt to clear them using the reset form function. As a novice in Angular, I am uncer ...

angularangular8angular9webapi

What is the best way to manage data types using express middleware?

In my Node.js project, I am utilizing Typescript. When working with Express middleware, there is often a need to transform the Request object. Unfortunately, with Typescript, it can be challenging to track how exactly the Request object was transformed. If ...

node.jsexpresstypescript

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Currently, I have a functional component set up for the Signup page. My goal is to define props within this component so that I can pass the necessary values to it from another component. This is my current approach: export default function SignupPage({mod ...

javascriptreactjstypescriptnext.jstypes

Recently updated to the latest versions of Angular, AngularCLI, and Rxjs (version 6), however encountering an error stating "Property 'take' does not exist on type 'Observable'"

Recently, I made the decision to update my Angular5 project to Angular6 and upgraded all dependencies along with it (such as rxjs now at version 6 and angular-cli). However, I have encountered a problem that is proving difficult to resolve: ERROR in src/ ...

javascriptangularrxjsfrontendangularfire2

Are the maps intersecting within the field of vision?

I have 2 components in my angular application each showing a map from mapbox. Here is the code for one of the components: Component import { Component, OnInit } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; @Component( ...

cssangularmapboxmapbox-gl

Attempting to create a promise for a dropdown menu in React-Select

I am facing an issue here: type Person = { value: string; label: string; }; Furthermore, I have a promise-containing code block that fetches data from an API and transforms it into the appropriate array type for a React component. My intention is to r ...

reactjstypescript

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

After struggling for an hour on this issue, I am stuck. The variables outDir and rootDir are set. However, the problem arises when only src is included in include, TypeScript shows the configuration via showConfig, yet it's attempting to compile 4 fi ...

typescript

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

Currently, I am facing a challenge in performing addition on currency prices stored as an array of objects. The issue arises from the fact that the currency type can vary among 3 different types within the array of objects. The main hurdle I encounter is ...

javascriptnode.jstypescript

Storing data efficiently with Angular 2's local storage service

I am attempting to create a ToDoList using localstorage within a service. add.component.ts export class AddComponent implements OnInit { item: Item[]; constructor( private router: Router, private itemService: ItemService) { } ...

javascripthtmlangularlocal-storage

Executing a service request in Angular 2 using a versatile function

I have a function that determines which service to call and a function template for calling the service returned by that function. This function makes HTTP requests using http.get/http.post, which return an Observable and then perform a map operation on th ...

angularangular2-servicessubscribeangular2-http

Fairly intricate React function component declaration with TypeScript

const withAuth = () => <OriginalProps extends {}>( Component: React.ComponentType<OriginalProps & IAuthContextInterface> ) => { } (withAuth()(PrivateRoute)) // this is how the HOC called Could someone simplify what this function d ...

reactjstypescript

Guide on maintaining Spring Security authentication across Angular front-end

Following the initial feedback on my query, I made adjustments to my Spring Security setup and successfully logged in and accessed a test endpoint using Postman. However, when the same endpoint is called by Angular post successful login, the request fails, ...

javaangularspring-security

Benefits of Angular Signals - Why is it advantageous?

I'm grappling with the concept of Angular Signals and their benefits. While many examples demonstrate counting, I'm curious about why signals are preferable to using variables like myCount and myCountDouble as shown below? Check out my code on S ...

angularsignalsangular-signals

Oops! Looks like there was an error trying to assign the value "$event" to the template variable "element". Remember, template variables can only be read

Can anyone assist me in identifying the issue with this code? <div *ngFor="let element of list; let index=index"> <mat-form-field> <input matInput type="string" [(ngModel)]="element" name="element ...

angulartypescript

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

javascripthtmlangulartypescriptangular2-template

Having difficulty running lint on Vue 3 TypeScript application, but building process is successful

We are encountering an issue at the moment. We can successfully build our app, but we are facing challenges with linting using the vue tools (vue-cli-service ...). The hot-reloading feature works initially, but upon saving a file, we receive an error mess ...

typescriptvue.jsbabeljseslintvuejs3

Can you identify the type of component that is returned from the withStyles() function?

My project includes a simple Dictionary component with basic properties: interface DictionaryProps { word: string; } In another component's props, I am looking for a generic component that only requires a string word: dictionary: React.ComponentC ...

reactjstypescriptmaterial-uireact-componentjss

Is it possible to create a single directive that can handle both Structural and Attribute behaviors?

Trying to develop an Angular Directive that will handle various functionalities based on config input values Dynamically add elements to the DOM based on input values (similar to ngIf) Apply styling to rendered elements Add attribute properties such as d ...

angulartypescriptangular-directive

How to add Bootstrap and Font Awesome to your Angular project

After attempting to add Bootstrap and Font Awesome to my Angular application, I am encountering issues. I utilized the command npm install --save bootstrap font-awesome and included both libraries in the angular.json file as follows: "styles": ...

javascriptangularangularjstypescripttwitter-bootstrap

Tackling the white-source security problem in npm libraries

A security advisory from White-source has identified high vulnerability issues with certain libraries used in your repository, specifically with yargs-parser: 1. build-angular-0.13.8.tgz (Root Library) node-sass-4.11.0.tgz sass-graph-2.2 ...

angularsecuritynpmpackage.jsonyargs