CODEWITHSUNDEEP
javascriptangulartypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

Call a function once only after data has been received from @input (Angular 5)

Ive got a component that gets some data passed in from a parent component via an input so..

main.component.ts

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

then in my

sidebar.component.ts

@Input() data: Entry<any>;

now this data has a unique id in its response and that id is used as a parameter in another function that calls some data that then populates an element on my page, so Ive been able to get it to work by putting the function in the ngOnChanges but obviously everytime something changes it recalls that function.. is there a way to call a function but only after I have recieved the data from the Input() data?

my current set up is as follows:

 ngOnChanges() {
    this.id = this.data.fields.id; // sets the id from the @input() data
    this.getElements(this.id); //gets the other data using the passed in id
 }

EDIT

Just to clarify, I only want to set the this.id the first time, not everytime the data changes, the data that is coming in is from an api so you have to allow for the data to come in the first time

Thanks

Upvotes: 1

Views: 5315

Answers (2)

cyr_x
cyr_x

Reputation: 14257

UPDATE: If you only want to set the id if the data is set for the first time, you do that in the OnChanges lifecycle hook and check if the id is already 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);
    }  
  }
}

And just in case if you want to set the id only if the id changed, 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 has a parameter of type SimpleChanges. You should use it to only react to a change of 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);
  }
}

Or as an alternative, you could use 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;
}

Upvotes: 4

Mateusz Witkowski
Mateusz Witkowski

Reputation: 1746

You can use a setter for this (the code inside is called everytime the value of passed input has changed):

@Input('data')
set data(value: Entry) {
    // do something with incoming data
}

Upvotes: 2

Related Questions