What could be causing the issue of *ngIf not displaying content within ng-container in Angular

I am struggling to close a bootstrap alert box by clicking on the close button using *ngIf.

When I click on (close), I set isError to false. Even though I can see isError being logged as false, the ng-container is not disappearing. Here is my code:

<div class="error-list">
  <ng-container *ngIf="isError">
    <ngb-alert type="danger" (click)="closeError()">{{errorMessage}}</ngb-alert>
  </ng-container>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span
        aria-hidden="true">&times;</span></span>
    <strong>Warning!</strong> {{errorMessage}}.
  </div>

</div>

.error-list {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

::ng-deep .alert {
  margin-bottom: 0;
}

.ts file

 closeError(): void {

this.isError = false;
console.log("Message: ", this.isError);
}

Answer №1

I have found a solution to your issue without encountering any problems. Here is a straightforward example:

https://example.com/edit/angular-abc123

Based on my understanding, you also want to hide the div with the class

alert alert-warning alert-dismissible
. To achieve this, you will need to include it within a ng-container.

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

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

Form using Ajax technology, including two drop-down menus sourced externally

Is there a way to automatically populate a second drop-down list with all models once a selection is made in the first drop-down on a form? Below is the code snippet: <form> <div class="landing_quote_left"> ...

Tips for dragging a column in ngx-datatable to scroll the horizontal scroll bar in Angular 4

Is there a way to make the horizontal scroll bar move when dragging the column header of ngx-datatable in Angular 4? I have a situation where the first column should trigger the movement of the horizontal scroll bar when dragged from left to right. Any s ...

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

Instructions on how to prompt users to register using a distinctive code

Currently in the process of constructing a website and I'm interested in setting restrictions on the number of users who can sign up for it. https://i.stack.imgur.com/JD2Ct.png In the image provided, there is a database in phpMyAdmin labeled as &apo ...

Personalize Bootstrap 5 slider for mobile (displaying multiple items without being arranged in a single row)

Having trouble customizing the carousel layout for mobile devices. I'm trying to display all items of the carousel on mobile instead of just one. I've been experimenting with CSS and JS, specifically with the display, float, or max-width properti ...

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

Using jQuery to select ASP control based on its dynamically generated Name attribute

When attempting to reference an ASP control in JavaScript, I initially used the generated ID but encountered issues. Surprisingly, referencing the control by its generated "Name" proved to be successful. ASP <asp:CheckBox ID="chkMyself" runat="server" ...

The conversion of XML to HTML using setQuery(QString) in QXmlQuery is unsuccessful

Whenever I use the method setQuery(QUrl(file.xsl)), it functions properly. However, if I first load the file into a QString and then invoke setQuery(theString), the subsequent evaluateTo() operation fails (resulting in a boolean exception and empty result) ...

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

Having trouble loading IE with jQuery isotope

Encountering a common issue on an unfamiliar browser, many still face the challenge. Setting up an isotope grid on websites seems to function seamlessly across various browsers, except for when testing in Internet Explorer using . In this case, the layout ...

Barba.jS is causing a delay in loading scripts after the page transition

One of my index files includes Gsap and Barba JS, while an inner page includes additional JS files such as locomotive.js and OWLcarousel.js. These two JS files are not necessary for the index page. However, when transitioning from the index page to the inn ...

Easily retrieving row values from a Repeater with jQuery

A challenge I'm facing involves a jQuery function that triggers on the onchange event of a textbox. The goal is to validate the user input in the textbox against the values in a datatable displayed by a repeater. While I managed to retrieve the textbo ...

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

I am currently developing a webpage using the Foundation 5 framework that features a table of information. Each row in the table contains a link that, when clicked, opens a specific modal displaying detailed information related to that row. I want to add a ...

Obtain the data from a service that utilizes observables in conjunction with the Angular Google Maps API

In my Angular project, I needed to include a map component. I integrated the Google Maps API service in a file called map.service.ts. My goal was to draw circles (polygons) on the map and send values to the backend. To achieve this, I added event listeners ...

What steps do I need to take in order to successfully make a checkbox?

I am attempting to use Angularjs to set a checkbox to true. When saved, it should store an integer value (1 or 0) in my field. Below is the code snippet for the view: <input type="checkbox" ng-model="lis.SMSPromotion" id="SMSPromotion" ng-init="checke ...

Incorporating SASS/SCSS syntax within the <style> element

Can I include SASS/SCSS syntax directly in an .html file within a style tag? I'm interested in defining a variable within the .html file and then utilizing it in a .sass file. ...

Issue updating Bootstrap in ASP.Net Core 2.1 with Angular Template

Every time I start a new ASP.Net Core 2.1 project with the angular template and try to update the bootstrap version from 3 to 4 in package.json, it ends up breaking my application. Despite numerous attempts such as deleting the node_modules folder and rein ...

Ways to establish a minimum height for material cards using Material UI

I am facing an issue with a card that contains a nested table. The card expands and shrinks based on the size of the table inside it. I want to prevent the card from shrinking when the table has no data or just one entry. Instead, I need the card to mainta ...

Creating a dynamic layout by combining Flexbox CSS and Bootstrap for optimal responsiveness

After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...