Ways to invoke a function in Angular2 when the Boolean condition is met

Question

Ways to invoke a function in Angular2 when the Boolean condition is met

Within my component class, I have implemented a popup function along with a Boolean flag that returns true or false based on specified conditions. In the template class, I want the popup function to be triggered when the flag becomes true, displaying a popup dialog box. However, I am unsure of the correct approach to achieve this. Any assistance in guiding me towards the right solution would be greatly appreciated.

<ng-template #sessionSuccessModal let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Include Criteria Error</h4>
<button type="button" class="close" aria-label="Close" (click)="closeModel()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"  class="bg-light text-dark">
<p>{{ alertMessage }}!</p>
</div>
<div style="text-align: center" class="bg-light text-dark">
<button type="button"  (click)="closeModel()">Ok</button>

</div>
</ng-template>

The initial state of 'commaSeparation' is set to false, and then later validated using 'validateMultiComma()' from 'genericValidator'. If the validation returns true, I need to invoke the 'displayModel()' alert method. Currently, the popup functionality is working as expected within 'ngAfterViewInit()', but an error is being logged in the console.

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

 ngAfterViewInit() {
        let controlBlurs: Observable<any>[] = this.formControls
            .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
// debounceTime(1000)/
        Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
            this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
           // this.valid = this.genericValidator.validateControls(this.orderUnitForm);
        });
        this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
            this.valid = this.genericValidator.validateControls(this.orderUnitForm);
            this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
              if(this.commaSeparation == true){
                this.displayModel();
              }
        });
  }

Below is the implementation of my 'dispalyModel()' function:

displayModel() {
     this.alertMessage = 'You cannot enter more than one multiple at the same time ';
     this.successErrorModalBlock = this.modalService.open(this.sessionSuccessModalref);
   }

javascript angular typescript

Answer 1

Answer №1

To accomplish this, you can implement the OnChanges interface, which is a lifecycle hook in Angular.

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnChanges  {

  // defining the flag property
  commaSeparation: boolean;

  ngOnChanges(changes: SimpleChanges){
    if (changes['commaSeparation'] && changes['commaSeparation'].currentValue){
        this.showPopup();
    }
  }

  public showPopup(){
        alert('Replace this alert with code that will display your popup');
  }
}

Resource: https://angular.io/guide/lifecycle-hooks#onchanges

Answer 2

To accomplish this, you can implement the OnChanges interface, which is a lifecycle hook in Angular.

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnChanges  {

  // defining the flag property
  commaSeparation: boolean;

  ngOnChanges(changes: SimpleChanges){
    if (changes['commaSeparation'] && changes['commaSeparation'].currentValue){
        this.showPopup();
    }
  }

  public showPopup(){
        alert('Replace this alert with code that will display your popup');
  }
}

Resource: https://angular.io/guide/lifecycle-hooks#onchanges

Answer 3

Answer №2

It is generally not recommended to invoke functions with side effects within an angular expression. Angular may call these functions multiple times to ensure consistency in the result. Instead, use functions in expressions to return a value rather than trigger an action.

For a better approach, consider calling popupAlert from your controller like this:

$scope.$watch('commaSeparation', function(commaSeparation) {
        // The value of commaSeparation has just changed. Alert if it changed to true!
        if (commaSeparation) {
            popupAlert();
        }
    });

Answer 4

It is generally not recommended to invoke functions with side effects within an angular expression. Angular may call these functions multiple times to ensure consistency in the result. Instead, use functions in expressions to return a value rather than trigger an action.

For a better approach, consider calling popupAlert from your controller like this:

$scope.$watch('commaSeparation', function(commaSeparation) {
        // The value of commaSeparation has just changed. Alert if it changed to true!
        if (commaSeparation) {
            popupAlert();
        }
    });

Answer 5

Answer №3

When dealing with the input property commaSeparated, you have the option to implement a property change watcher using the lifecycle hook ngOnChanges. By doing so, you can conditionally call popupAlert whenever the value of commaSeparation changes (link to docs).

@Component({
...
})
export class MyComponent implements OnChanges {

  // ...

  @Input()
  commaSeparation = false;

  // ...

  ngOnChanges(changes: SimpleChanges) {
    const commaSeparationChanges = changes.commaSeparation;

    if (commaSeparationChanges && commaSeparationChanges.currentValue) {
      this.popupAlert();
    }
  }
}

If commaSeparated is only modified within the component itself, consider making it private and utilizing a getter/setter pair to handle triggering the popup:

@Component({
...
})
export class MyComponent implements OnChanges {

  // ...

  private _commaSeparation = false;

  // ...

  get commaSeparation() {
    return this._commaSeparation;
  }

  set commaSeparation(value) {
    this._commaSeparation = value;

    if (value) {
       this.popupAlert();
    }
  }
}

Answer 6

When dealing with the input property commaSeparated, you have the option to implement a property change watcher using the lifecycle hook ngOnChanges. By doing so, you can conditionally call popupAlert whenever the value of commaSeparation changes (link to docs).

@Component({
...
})
export class MyComponent implements OnChanges {

  // ...

  @Input()
  commaSeparation = false;

  // ...

  ngOnChanges(changes: SimpleChanges) {
    const commaSeparationChanges = changes.commaSeparation;

    if (commaSeparationChanges && commaSeparationChanges.currentValue) {
      this.popupAlert();
    }
  }
}

If commaSeparated is only modified within the component itself, consider making it private and utilizing a getter/setter pair to handle triggering the popup:

@Component({
...
})
export class MyComponent implements OnChanges {

  // ...

  private _commaSeparation = false;

  // ...

  get commaSeparation() {
    return this._commaSeparation;
  }

  set commaSeparation(value) {
    this._commaSeparation = value;

    if (value) {
       this.popupAlert();
    }
  }
}

Ways to invoke a function in Angular2 when the Boolean condition is met

Answer №1

Answer №2

Answer №3

Similar questions

Start progress bars on several divs that share a common class

Is the NodeJS debugger prone to crashing when utilizing `this` to invoke an unidentified function?

Utilize the NPM package manager in the zsh shell on Ubuntu within a Windows 10

Tips for retrieving a reactive variable from a setup() method?

Customize your Google Translate experience by choosing your own option values

Facing an issue with displaying a component error in a mat-form-field in Angular 9

What is the reason for the HTTP service being activated automatically?

What are the steps to fix a timeout error with React.js and socket.io acknowledgements?

Issue in Vuetify: The value of the first keypress event is consistently an empty string

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Execute JS function when navigating back in history

Having issues delivering static JavaScript files to the client's browser using express.js

Retrieving a specific item using its ID from a JSON file with Ionic 5

Syntax in Next.js for shallow routing

`Troubleshooting Issue: Autocomplete feature in Jquery Codeigniter not functioning

Is it possible to generate a form dynamically in a Vue.js HTML file based on JSON data? Check out the provided f

What might be causing res.download to retrieve a zip file that is empty?

Failed to install @ngrx/store due to unforeseen issues

Organize intricate JavaScript Arrays

Manipulate md-select options with Angular using setValue