Template does not recognize changes in *ngIf

Currently, I am facing an issue where I want to display a loading message for 3 seconds and then hide it using the *ngIf directive in Angular 8. Interestingly, I have not encountered this problem in my previous projects.

Below is the code snippet that I am utilizing:

//Component.ts
loading = true;
ngOnInit() { 
   setTimeout(()=> {
     this.loading = false;
     console.log(this.loading)
   },3000)
}

//Component.html
<div *ngIf="loading" class="col-lg-12" style="text-align: center;">
     <app-loading></app-loading>
</div>

After 3 seconds, the 'loading' variable is indeed set to false. However, the template fails to detect this change. Can someone explain why this is happening? Additionally, I would appreciate any suggestions on how to resolve this issue without resorting to using ChangeDetectorRef.

javascriptangulartypescriptangular-ng-if

Answer №1

If you are not using the OnPush change detection strategy, then the example will function as expected.

Answer №2

You can attempt it in this manner:

See Live Example

ngOnInit() {
  let self = this;
  setTimeout(() => {
    self.isLoading = false;
    console.log(self.isLoading);
  }, 3000);
}

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

Obtaining database information and utilizing setValue or patchValue

One way to retrieve data from a database and populate it into an input box is shown below: Retrieving service getStudentAddress() { const id = sessionStorage.getItem('userId'); return this.http.get('http://localhost:8080' + '/s ...

angulartypescript

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Showing validation for arrays with multiple inputs using Ajax in the Laravel framework

Could someone please provide guidance on how to use ajax to display the JSON response of form validation messages in Laravel? Below are some of my form inputs: {!! Form::text('stories[0][subject]', null, [ 'class' => 'form-con ...

javascriptphpjsonajaxlaravel

Clicking the button in Angular should trigger a series of functions to be

It seems like I'm struggling with a simple question due to my lack of experience in this area. Any guidance or help would be greatly appreciated. I have a button that should trigger multiple functions when clicked, all defined in the same ts file. Wh ...

javascriptangulartypescriptbutton

Insert a symbol at the beginning of the Autocomplete component in Material-UI

I am looking to enhance the Autocomplete component by adding an icon at the beginning using startAdornment. I discovered that Autocomplete functions as a regular text input. My attempt so far involved inserting: InputProps={{startAdornment: <InputAdorn ...

reactjstypescriptautocompletematerial-uireact-props

Unused function in Vue error compilation

I am facing an issue with the compiler indicating that the function 'show' is defined but never used. The function show is being used in HTML like this: <b-card> <div id="draw-image-test"> <canvas id="can ...

javascriptvue.js

Correct the positioning upon refreshing within a table containing multiple pages

Struggling with my code in index.php as it maintains the position inside the table but loses track of the web page number. The refresh is triggered by a button that updates a value in the selected row (in column B) by running a php script validation.php. I ...

javascriptphphtmlcss

Highcharts is hitting the limit of the call stack when trying to set

I'm currently working with highcharts and facing an issue where I want to click on a point, trigger a modal pop-up, and be able to change dropdown options as well as the color and symbol of the selected point. While I can successfully change one point ...

javascripthighcharts

find the text that is not encompassed by a particular html tag

After coming across this inquiry, I am curious about how one can detect text that is not within a particular HTML tag. desired text: "targetstring" excluding the script HTML tag <div> <h1>targetstring</h1> <= should be detected ...

javascripthtmlregexregex-lookarounds

The Ocelot API Gateway is a powerful tool for managing

I encountered an issue while working on my API gateway project. I initially installed the latest version of Ocelot (16.0.1), but it did not function correctly. The problem was resolved by reverting back to Ocelot version 15.0.6, while keeping my .NET Core ...

javascriptangular.net-core

How can I duplicate a specific row within DataTables?

I have successfully implemented a feature that allows me to delete a selected row in my application. Now, I am looking to add functionality to duplicate or clone the selected row. The process of adding rows to DataTables can sometimes be challenging becaus ...

javascriptjquerydatatablesclone

The default value for the ReturnType<typeof setInterval> in both the browser and node environments

I have a question about setting the initial value for the intervalTimer in an Interval that I need to save. The type is ReturnType<typeof setInterval>. interface Data { intervalTimer: ReturnType<typeof setInterval> } var data : Data = { ...

node.jstypescriptvue.js

The setState function in React updates the value, however, when a form is submitted, it captures and

Encountering a problem with a modified field value not remaining on the form after submission. Working on a form where users can upload images. The image URL returned by the hosting service is saved in a state variable using this.setState({ im ...

javascriptreactjsformsreact-native

Is there a way to securely embed YouTube videos in my web application without exposing the direct video links?

I'm hoping to integrate YouTube videos into my web application, but I need a way to prevent users from accessing the direct video links while they are using the app. Does anyone have any suggestions on how this can be accomplished? I am unsure of how ...

javascriptnode.jshyperlinkyoutubeembed

connect the validation of forms to different components

I am currently working on components to facilitate the user addition process. Below is an example of my form component: createForm(): void { this.courseAddForm = this.formBuilder.group({ name: ['', [ Validators.required, ...

javascriptangulartypescript

storing HTML elements in Chrome's cache

I have developed a content uploading module that utilizes the file API. The HTML code is <input type="file" id="filepicker-input" multiple="true" style="display:none;"/> <div class="addfile_btndiv" id="addfile_btndiv"> ...

javascriptjquerygoogle-chrome

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

The process on how to access dynamic object properties within a parent component while using v-for in a child component

I am working on a child component that utilizes v-for to loop through data. Below is the code for the child component: <template> <div> <ul> <li v-for="item in listItems" :key=item.id&g ...

javascriptvue.jsvuejs2vue-component

Manipulating data in a deeply nested field of an embedded document using Mongoose, MongoDB, and Express

I have been pondering whether it is feasible to input data into the comments field of my "TopicSchema": var mongoose = require('mongoose'); var TopicSchema = new mongoose.Schema({ username: String, topic: String, des ...

javascriptnode.jsmongodbexpressmongoose

Attempting to send a formik form to a specified action URL

Seeking assistance with a simple fix as I navigate through the learning process. I have created an action called addTenant() that is supposed to receive the state and use it to dispatch a post API call, like so: export const addTenant = (tenant) => (di ...

javascriptreactjsreduxformik