When ngIf fails to detect a change in a variable's value

Question

When ngIf fails to detect a change in a variable's value

Whenever I try to set a simple boolean variable to show/hide a div from another component, the ngIf directive doesn't seem to recognize it.

In my messages-refresh.component.html file:

<div class="divOpacity" *ngIf="show">
<div class="boxMessageModal">
    <p>New data has been found for this page, click Ok to refresh!</p>
    <button class="btnOktoReload" (click)="reloadPage()">Ok</button>
</div>

In my messages-refresh.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-messages-refresh',
  templateUrl: './messages-refresh.component.html',
  styleUrls: ['./messages-refresh.component.css']
})

export class MessagesRefreshComponent implements OnInit {

  constructor(private location:Location) { }

  reloadPage(){
    location.reload(true)
  }

  show:boolean = false
  showDivOpacity(){
    this.show = true
  }

  ngOnInit() {
  }

}

To trigger the showDivOpacity method from another component, use

this.messagesRefreshComponent.showDivOpacity()

angular typescript

Answer 1

Answer №1

Each instance is different because you are attempting to utilize injection with a component.

To resolve this issue, consider using an injection class singleton with a BehaviorSubject. This approach will provide a single instance with storage for saving objects or values, accessible by all components through injection.

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class SettingsService {
  private showSubject = new BehaviorSubject<boolean>(false);

  setUpdateShow(){
      this.showSubject.next(!showSubject.getValue());
  }

  isShowing$(){
     this.showSubject.asObservable();
  }
}

Subsequently, in the components, you can inject and use the value.

The Component.ts displaying the subject

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-messages-refresh',
  templateUrl: './messages-refresh.component.html',
  styleUrls: ['./messages-refresh.component.css']
})

export class MessagesRefreshComponent implements OnInit {

  constructor(private settingsService:SettingsService ) { }
 show$: Observable<boolean>()
 ngOnInit() {
   this.show$ = this.settingsService.isShowing$();
 }
}

HTML

<div class="divOpacity" *ngIf="show$ | async">
<div class="boxMessageModal">
    <p>New data has been found for this page. Click Ok to refresh! </p>
    <button class="btnOktoReload" (click)="reloadPage()">Ok</button>
</div>

To access or modify the subject, you need to inject the services and call the setUpdateShow() function. This may be a bit complex to grasp at first, but it is the optimal solution for communication between unrelated components.

Answer 2

Each instance is different because you are attempting to utilize injection with a component.

To resolve this issue, consider using an injection class singleton with a BehaviorSubject. This approach will provide a single instance with storage for saving objects or values, accessible by all components through injection.

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class SettingsService {
  private showSubject = new BehaviorSubject<boolean>(false);

  setUpdateShow(){
      this.showSubject.next(!showSubject.getValue());
  }

  isShowing$(){
     this.showSubject.asObservable();
  }
}

Subsequently, in the components, you can inject and use the value.

The Component.ts displaying the subject

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'app-messages-refresh',
  templateUrl: './messages-refresh.component.html',
  styleUrls: ['./messages-refresh.component.css']
})

export class MessagesRefreshComponent implements OnInit {

  constructor(private settingsService:SettingsService ) { }
 show$: Observable<boolean>()
 ngOnInit() {
   this.show$ = this.settingsService.isShowing$();
 }
}

HTML

<div class="divOpacity" *ngIf="show$ | async">
<div class="boxMessageModal">
    <p>New data has been found for this page. Click Ok to refresh! </p>
    <button class="btnOktoReload" (click)="reloadPage()">Ok</button>
</div>

To access or modify the subject, you need to inject the services and call the setUpdateShow() function. This may be a bit complex to grasp at first, but it is the optimal solution for communication between unrelated components.

When ngIf fails to detect a change in a variable's value

Answer №1

Similar questions

Connection to mongo is currently unavailable for Middleware next

The group validator has no effect on the form's isValid status

Making Amazon Cognito function seamlessly with angular2 and typescript

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

Automatic renewal of bearer token in Angular 7

What is the default appendTo value in ng-select for Angular 10 and above?

Angular: The CORS issue continues despite configuring proxy.conf.json

Testing a function within a class using closure in Javascript with Jest

Anticipating outcome in NgRx Effects

Leveraging the power of NestJS in conjunction with Apollo Server version 2

Unraveling the art of utilizing the map operator in ES6 with condition

Angular 10 encountering issues with loading Bootstrap styles

Arrangement of code: Utilizing a Node server and React project with a common set of

The 'forkJoin' feature is not available within the Observable class

Issue: Dependency type ContextElementDependency does not have a corresponding module factory available

How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

Ensure that the constructor function is fully executed before triggering the interceptor function

Issue with resolving parameters for AppComponent in Angular 6

Issues with manipulating state using TypeScript Discriminated Unions"Incompatibility with setState

Having trouble building a new project with Angular-cli v.6?