Execute a function once the data has been received from @input in Angular 5

Question

Execute a function once the data has been received from @input in Angular 5

My component receives data from a parent component through an input:

Main Component: main.component.ts

<app-sidebar [data]="programData"></app-sidebar>

In the sidebar component, I have the following:

Sidebar Component: sidebar.component.ts

@Input() data: Entry<any>;

The received data contains a unique ID that is used as a parameter in another function to fetch and populate elements on the page. Currently, I am calling this function inside ngOnChanges, but it gets triggered every time there is a change. Is there a way to call this function only after receiving the data from Input() data for the first time?

Here is my current implementation:

 ngOnChanges() {
    this.id = this.data.fields.id; 
    this.getElements(this.id); 
 }

EDIT

To clarify, I want to set this.id only once when receiving the data for the first time. The incoming data is from an API, so it needs to be processed correctly.

Thank you

javascript angular typescript

Answer 1

Answer №1

UPDATE: In order to only assign the id when the data is set for the first time, you can do so within the OnChanges lifecycle hook by checking if the id has already been set:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields = changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && (!this.id && this.id !== 0)) {
      this.id = data.fields.id;
      this.getElements(this.id);
    }  
  }
}

If you want to set the id only when it changes, you can use:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields = changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && fields.id !== this.id) {
      this.id = fields.id;
      this.getElements(this.id);
    }  
  }
}

The OnChanges lifecycle hook accepts a parameter of type SimpleChanges, which should be used to react specifically to changes in the data input.

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const data = changes.data.currentValue;
    this.id = data.fields.id;
    this.getElements(this.id);
  }
}

Alternatively, you could utilize a setter for your input:

private _data: Entry<any>;

@Input()
set data(value: Entry<any>) {
  this._data = value;
  this.id = value.fields.id;
  this.getElements(this.id);
}

get data() {
  return this._data;
}

Answer 2

UPDATE: In order to only assign the id when the data is set for the first time, you can do so within the OnChanges lifecycle hook by checking if the id has already been set:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields = changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && (!this.id && this.id !== 0)) {
      this.id = data.fields.id;
      this.getElements(this.id);
    }  
  }
}

If you want to set the id only when it changes, you can use:

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const fields = changes.data.currentValue.fields;
    if(fields && (fields.id || fields.id === 0) && fields.id !== this.id) {
      this.id = fields.id;
      this.getElements(this.id);
    }  
  }
}

The OnChanges lifecycle hook accepts a parameter of type SimpleChanges, which should be used to react specifically to changes in the data input.

ngOnChanges(changes: SimpleChanges) {
  if(changes.data && changes.data.currentValue) {
    const data = changes.data.currentValue;
    this.id = data.fields.id;
    this.getElements(this.id);
  }
}

Alternatively, you could utilize a setter for your input:

private _data: Entry<any>;

@Input()
set data(value: Entry<any>) {
  this._data = value;
  this.id = value.fields.id;
  this.getElements(this.id);
}

get data() {
  return this._data;
}

Answer 3

Answer №2

To handle changes in the input value, you can utilize a setter function as shown below:

@Input('data')
set data(value: Entry) {
    // Perform actions with the new incoming data
}

Answer 4

To handle changes in the input value, you can utilize a setter function as shown below:

@Input('data')
set data(value: Entry) {
    // Perform actions with the new incoming data
}

Execute a function once the data has been received from @input in Angular 5

Answer №1

Answer №2

Similar questions

Refreshing the inline div styling

How to Use JQuery Load to Load Google Maps?

Problem with Pathjs routing

Customizing demonstration code for EventDrops with D3.js (by marmelab) - what are the best strategies?

Switching Tabs When a Button is Clicked

AngularJS OAuth authentication Pop-up: Waiting for JSON response

Refresh feature in Angular2/TypescriptRefresh functionality using Angular2/

The combination of the table, thead, and tbody components causes disruptions in the layout of the overall table structure

Struggling with developing a personalized editor for React-Data-Grid

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

Executing multiple commands using Node.js TCP communication

Creating a custom arrow design for a select input field using CSS

Organize routes into distinct modules in Angular 6

Customized coordinates on leaflet map fail to render

Tips for sorting an array of objects by multiple keys while maintaining the order of each key that comes before

The present URL of Next.js version 13

What is the best way to retrieve the final value stored?

Leveraging the power of react routes for efficient navigation within a react-based application

Comma styling in JavaScript

How can I arrange selected options at the top in MUI autocomplete?