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

mainponent.ts

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

then in my

sidebarponent.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 ing in is from an api so you have to allow for the data to e in the first time

Thanks

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

main.ponent.ts

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

then in my

sidebar.ponent.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 ing in is from an api so you have to allow for the data to e in the first time

Thanks

• javascript
• angular
• typescript

Share Improve this question Follow edited Mar 8, 2018 at 23:12 Smokey Dawson asked Mar 8, 2018 at 22:41 Smokey DawsonSmokey Dawson 9,2402323 gold badges8585 silver badges162162 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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;
}

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 ining data
}