Discovering alterations in a component's attribute -Ang8

Question

Discovering alterations in a component's attribute -Ang8

In my component, there are buttons to set the properties as follows:

dataType:String = null
 fechaI : Date = null
 fechaF :Date = null
 checkedList =[]

I need to trigger an HTTP request when all properties have values and redo the request if any of them change during runtime.

I attempted using ngDoCheck:

ngDoCheck(){
    if((this.checkedList !=null)&&(this.dataType!=null)&&(this.fechaI !=null)&&(this.fechaF !=null)){
      console.table(this.checkedList)
      console.log(this.dataType)
      console.log(this.fechaF)
      console.log('Sending Options')
      this.http.post('',{})
  }
}

However, the doCheck hook gets triggered every time I scroll or perform any action, making it not a suitable solution. How can I achieve the desired outcome?

angular typescript

Answer 1

Answer №1

If you want to monitor and react to changes in your controller variables, follow this approach:

An effective method for implementing change detection is consolidating your variables into a single object like so:

myData = {
  type: null
  startDate: null
  endDate: null
  selectedItems: []
}

In your view:

<input type="text"  
  [ngModel]="myData.type"
  (ngModelChange)="onUpdate($event)"
  name="type"
  required>

To detect changes:

onUpdate($changes) {
  console.log($changes)
  this.http.post(myUrl, $changes) // Placeholder
}

Answer 2

If you want to monitor and react to changes in your controller variables, follow this approach:

An effective method for implementing change detection is consolidating your variables into a single object like so:

myData = {
  type: null
  startDate: null
  endDate: null
  selectedItems: []
}

In your view:

<input type="text"  
  [ngModel]="myData.type"
  (ngModelChange)="onUpdate($event)"
  name="type"
  required>

To detect changes:

onUpdate($changes) {
  console.log($changes)
  this.http.post(myUrl, $changes) // Placeholder
}

Discovering alterations in a component's attribute -Ang8

Answer №1

Similar questions

The toISOString() method is deducting a day from the specified value

Permitted the usage of a global variable of any type as the return value of a function that does not explicitly define its

The conditional expression is failing to function properly when applied to multiple form controls in the latest version of @rxweb/[email protected]

Steps for calculating the average of several columns within a table using Angular 10

using outlines for FontAwesome icons in React Native

Angular MDBootstrap formatting disappears upon refresh of the page

Employing multiple subscriptions within a function

Utilizing class-validator for conditional validation failure

Managing the ERR_NAME_NOT_RESOLVED issue

Retrieving template variable within a directive's host listener function

What is the best way to add a 'Drawer' component into the 'AppBar' using React MUI within the Next.js framework?

Unable to delete event listeners from the browser's Document Object Model

What could be causing my website to lose its responsiveness after linking a domain?

Mapping data arrays for a particular type of object array

Guide to crafting a reply using nestjs exception filters with nestfastify

Choose the initial selection from a list of changing values using Ionic

Using Angular 2: Pass the field of each item in *ngFor as a parameter when calling a function

Is it possible to build a Node.js (Express) application using a combination of JavaScript and TypeScript?

Most effective methods for validating API data

How to fix the TS4090 error regarding conflicting definitions for a node in Visual Studio 2017