"Angular allows for the reappearance of an alert even after it has been dismissed

Currently, I am engaged in an Angular project where I am implementing a feature to add objects to a table. However, not all of the object's fields are considered valid, and I need to notify the user through alerts. I am facing an issue where, after dismissing the alerts once, they fail to reappear...

<span *ngIf="errorMessage!=null && errorMessage!=''"  name="errorSpan" class="alert alert-warning alert-dismissible msg" role="alert">
  <strong>{{errorMessage}}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
    </span>

Here is the code in TypeScript (TS):

errorMessage:string;
isWorkerValid():boolean{
    this.errorMessage="";
    if(this.workerInserted.id==null || this.workerInserted.id=="" || this.workerInserted.id.length<9 || this.workerInserted.id.length>9){
      this.errorMessage+="מספר הזהות של העובד אינו תקין"+"\n";
    }
    if(this.workerInserted.name==null || this.workerInserted.name==""){
      this.errorMessage+="שם העובד אינו תקין"+"\n";
    }    
    if(this.errorMessage!=""){
        return false;
    }         
    return true;
  }

I have experimented with ng-show - unfortunately, it did not resolve my issue. I also attempted using 

dang-click="errorMessage=''"
and 
ng-click="errorMessage=''"
. However, I am restricted from leveraging JavaScript in my Angular project, which means I am unable to implement solutions like 
$scope.hideAlert()=function(){ $scope.serverError = false; }
as suggested in a previous answer here.

Even after dismissing the alert once, it refuses to reappear when triggered again. Can anyone offer assistance with this problem?

angulartypescriptbootstrap-4alert

Answer №1

In the world of Angular 2+, the familiar ng-show and ng-click directives have been replaced. Now, ng-show is represented by [hidden], and ng-click is embodied by (click), but let's not get too caught up in the details.

The reason why it seems to have disappeared is likely because, upon clicking the close button, bootstrap-4 effectively removes the span element from the DOM/HTML permanently.

A potential solution could involve encapsulating the content within an external ng-container.

<ng-container *ngIf="errorMessage">
  <span name="errorSpan" 
    class="alert alert-warning alert-dismissible msg" role="alert">
  <strong>{{errorMessage}}</strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"
       (click)="onDismissError()"
>
        <span aria-hidden="true">&times;</span></button>
    </span>
</ng-container>
....
onDismissError() {
  this.errorMessage = undefined;
}

By doing this, the contents within the ng-container should be refreshed each time the value of errorMessage changes.

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

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

javascripthtmlreactjstypescript

Utilize Promise.race() in Playwright Typescript to anticipate the appearance of one of two locators

Recently, I've delved into the world of Typescript while exploring Playwright for Test Automation. There's a scenario where two elements - Validated and Failed - can appear after some loading. In Selenium, my go-to method is to use WebDriverWait ...

typescriptplaywrightplaywright-test

Is it true that Angular 4 routers only maintain a single state during navigation?

After transitioning from state A to state B in my application, I noticed that when navigating back to state A, it seems to reload. Does this mean that State A is being destroyed during the transition to state B? If so, how can I prevent State A from relo ...

angulartypescript

Combining Angular 2 expressions with jQuery功能

My code snippet is currently functional: <div class="circle" data-value="0.8"%></div> However, I encounter an issue when attempting to bind the attribute: [data-value]="result/100" An error message is displayed: Can't bind to 'da ...

angular

The validation for the prop 'setLoading' is not defined

Currently, I am utilizing React version 17.0.2 along with Typescript for my project. My aim is to transfer the setLoading function from the parent component (App) to the child component (About) so that the loading state within App can be altered from About ...

reactjstypescript

Unresponsive Button_tag within a Rails table

The situation is as follows: I have a button_tag located within a form that is nested inside a table: <div class="table-responsive tableBG"> ** Interestingly, the button functions perfectly when placed here ** <table class="table table-striped ...

htmlbootstrap-4ruby-on-rails-5twitter-bootstrap-rails

Exploring the world of Typescript, mastering tests, and diving deep into debugging

As a newcomer to Angular 2 and TypeScript, I recently created a basic application using the Angular CLI. However, I've encountered a gap in my understanding regarding how TypeScript code in VS Code translates into a functional app in a web browser. I ...

angulardebuggingtestingvisual-studio-codekarma-jasmine

Angular 5 and Bootstrap card with enhanced double-click functionality

I want to design a Bootstrap card that can trigger two of my custom methods. <div (click)="TEST1()" class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <button (click)="(T ...

htmlangulartypescriptbootstrap-4

Which is more advantageous for creating a new block in Bootstrap 4 – using ".row" or ".col-12"? And what is the reasoning behind your choice?

Here is a simple example to demonstrate. <div class="container"> <div class="row"> <form class="col-12 form-group"> // some code </form> <div class="col-12"> // some text for description </d ...

htmlcssbootstrap-4

Utilizing *ngFor to display elements with odd indices

Within my Angular application, I have successfully used a loop to populate the 4 employeeList components. Here is the code snippet: <div *ngFor="let record of records"> <p-panel> <div comp-employeeList [listFilter]="record.Filte ...

angulartypescriptngforangular-components

NativeScript: The workspace path specified does not contain a valid workspace file

Currently, I am developing a new project using NativeScript and Angular. To streamline the process, I attempted to utilize Angular generators (schematics) through the command line. The command I executed was tns generate component <component name> U ...

angularnativescriptangular-cli

Strategies for splitting a component's general properties and accurately typing the outcomes

I am attempting to break down a custom type into its individual components: type CustomType<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & { aBunchOfProps: string; } The code appears as follows: const partitionProps = ...

typescripttypescript-typingstypescript-genericsreact-functional-componentreact-typescript

Developing an interface that utilizes the values of an enum as keys

Imagine having an enum called status export enum status { PENDING = 'pending', SUCCESS = 'success', FAIL = 'fail' } This enum is used in multiple places and should not be easily replaced. However, other developers migh ...

javascripttypescripttypescript-typingstypescript2.0

The process of releasing a component created with angular-starter onto npm is now underway

After creating angular components with the Angular Starter Kit from https://github.com/AngularClass/angular-starter, I am looking to package them and deploy them on NPM for easy use in other projects. However, I found the documentation to be lacking in thi ...

angulardeploymentnpmwebpack

Implementing conditional properties in Typescript based on the value of another property

Is it possible to make a property required in a type based on the presence of another property? Here's an example: type Parent = { children?: Child[]; childrenIdSequence: string[]; // This property should only be required when `children` is prov ...

typescript

The onRowSelect and onRowClick events are not being triggered on the Primeng table component in an Angular application

I am currently struggling to navigate to another component with the data selected when a row is clicked. I have been using p-table to accomplish this task. For some reason, neither onRowClick nor onRowSelection functions are being triggered. I even added ...

angularprimengprimeng-datatable

Issues with Angular 2 template not refreshing during testing

I'm struggling to get this to function properly. it('should have the expected <h1> text', async(() => { let fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const sectionEl = fixture.debugElement.que ...

unit-testingangularangular2-testing

How can a custom event bus from a separate account be incorporated into an event rule located in a different account within the CDK framework?

In account A, I have set up an event rule. In account B, I have a custom event bus that needs to act as the target for the event rule in account A. I found a helpful guide on Stack Overflow, but it was specific to CloudFormation. I am providing another a ...

typescriptamazon-web-servicesaws-cdkaws-event-bridge

Setting up Material-UI for React in conjunction with Typescript: A step-by-step guide

I've encountered issues while trying to integrate Material UI into my React project that's written in Typescript. Following the tutorial, I began by adding the react-tab-event-plugin. import injectTapEventPlugin from 'react-tap-event-plugi ...

javascriptreactjstypescriptmaterial-ui

The functionality of Angular 4 routing breaks down when attempting to access a direct URL path

Currently, I am working on an Angular 4 application that has numerous routes. The issue I am encountering is fairly straightforward to comprehend. All routing functions as expected within the app; however, a problem arises when accessing a specific URL dir ...

angularredirectangular2-routing