Angular: How to subscribe to @Input changes

Question

I'm trying to create a angular component, which renders a html table using the provided object array.

I have implemented OnChanges to detect changes to the @Input, it doesn't seem to work though.

For testing, I'm using setInterval to add some data, but It's not getting reflected in the child component.

This it the code I have so far,

ng-table.component.ts:

export class NgTableComponent implements OnInit, OnChanges {

    @Input() data: any[];

    private columns: string[];
    private rows: string[][];

    constructor() {
        this.columns = [];
        this.rows = [];
    }

    ngOnInit() {
    }

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
        if (changes.data) {
            this.extractRowsAndColumns(this.data);
        }
    }

    extractRowsAndColumns(objArray: any[]): void {
        const colSet = new Set<string>();
        for (let i = 0; i < objArray.length; i++) {
            const keys = Object.keys(objArray[i]);
            for (let j = 0; j < keys.length; j++) {
                colSet.add(keys[j]);
            }
        }
        this.columns = Array.from(colSet);

        for (let i = 0; i < objArray.length; i++) {
            const obj = objArray[i];
            const row = [];
            for (let j = 0; j < this.columns.length; j++) {
                if (obj.hasOwnProperty(this.columns[j])) {
                    row.push(obj[this.columns[j]]);
                } else {
                    row.push(null);
                }
            }
            this.rows.push(row);
        }
    }
}

ng-table.component.html:

<div>
    <table class="ngtable">
        <tr>
            <th *ngFor="let col of columns">
                {{col}}
            </th>
        </tr>
        <tr *ngFor="let row of rows">
            <td *ngFor="let cell of row">{{cell}}</td>
        </tr>
    </table>
</div>

I'm using the above component in app.component

app.component.ts:

export class AppComponent {
  timer: any;
  count = 0;
  constructor() {
    const o: any = {
      'id': 1,
      'name': 'Jeanette',
      'last_name': 'Penddreth',
      'email': '[email protected]',
      'gender': 'Female',
      'ip_address': '26.58.193.2'
    };
    this.timer = setInterval(() => {
      this.data.push(o);
      console.log(this.data.length);
      if ( this.count++ === 5) {
        clearInterval(this.timer);
      }
    }, 1000 * 1);
  }

  data = [{
    'id': 1,
    'name': 'Jeanette',
    'last_name': 'Penddreth',
    'email': '[email protected]',
    'gender': 'Female',
    'ip_address': '26.58.193.2'
  }, {
    'id': 2,
    'name': 'Giavani',
    'last_name': 'Frediani',
    'email': '[email protected]',
    'gender': 'Male',
    'ip_address': '229.179.4.212'
  }, {
    'id': 3,
    'name': 'Noell',
    'last_name': 'Bea',
    'email': '[email protected]',
    'gender': 'Female',
    'ip_address': '180.66.162.255'
  }, {
    'id': 4,
    'name': 'Willard',
    'last_name': 'Valek',
    'email': '[email protected]',
    'gender': 'Male',
    'ip_address': '67.76.188.26'
  }];
}

app.component.html:

<app-ng-table [data]="data"></app-ng-table>

How can I make the component update when @Input changes?

UPDATE: I have created a plunkr demonstrating this: https://plnkr.co/edit/szz1SNooQ1vIZhnFgiys?p=preview

try an observable of input by referring to this answer

Aravind
– Aravind

2017-10-19 11:26:31 +00:00
Commented Oct 19, 2017 at 11:26 — Aravind
– Aravind, Commented Oct 19, 2017 at 11:26

Carsten · Accepted Answer · 2017-10-19 10:51:16Z

4

Just make your @Input() two-way binding...

_data;
@Input() set data(val) {
  this._data = val;
}
get data() {
  return this._data;
}

answered Oct 19, 2017 at 10:51

Carsten

4,22826 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Hovius · Accepted Answer · 2017-10-19 12:25:21Z

2

I had the same problem before; the ngOnChanges method listens only to changes on datatypes ==! array.

Explanation (ngOnChanges not firing for nested object):

During change detection, when Angular checks components' input properties for change, it uses (essentially) === for dirty checking. For arrays, this means the array references (only) are dirty checked. Since the rawLapsData array reference isn't changing, ngOnChanges() will not be called.

edited Oct 19, 2017 at 12:25

answered Oct 19, 2017 at 12:10

Tim Hovius

7426 silver badges16 bronze badges

1 Comment

cyberpirate92 Over a year ago

You are right, the data in the child is indeed getting updated, but the ngOnChanges event is not getting fired. I tried logging the data in the child component using setInterval and I could see it getting updated.

Mohamed Ali RACHID · Accepted Answer · 2017-10-19 10:28:18Z

1

as a simple solution to your problem , you can detect @Input changes in ngOnChanges like this :

ngOnChanges(changes: SimpleChanges) {   
   for (let propName in changes) {
      // when your @Input value is changed  
      if(propName === "yourInputName"){
         // update the component here 
      }
   }
}

Hope it helps :)

answered Oct 19, 2017 at 10:28

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

7 Comments

cyberpirate92 Over a year ago

I have implemented OnChanges, but it's not working.

Mohamed Ali RACHID Over a year ago

what u want : if data's value changed you update the component by calling the method extractRowsAndColumns with the new data , am i right ?

cyberpirate92 Over a year ago

Yeah that's exactly what I want

Mohamed Ali RACHID Over a year ago

is there any errors ? , what happens exactly when you implemented my answer ?

cyberpirate92 Over a year ago

I couldn't find any errors in the debug console, the table doesn't get updated ( the new rows are not getting added).

|

LLai · Accepted Answer · 2017-10-19 13:24:32Z

0

As TimHovius stated, angular is only doing a reference check. Since you are pushing to the same array, the ng-table.component is not detecting a change (the reference to the input is still the same). One thing you can do is to create a shallow copy of the array.

addItem(): void {
    this.data.push(this.data[this.data.length-1]);
    // create shallow copy of array, since this is a new array (and new reference) ngOnChanges hook of the ng-table.component will fire
    this.data = this.data.slice(0);
}

Now ng-table.component will detect that the input has changed and fire ngOnChanges

Here is a plunkr demoing this (https://plnkr.co/edit/2tdMEA9PLc2TEL4Gy4Lp?p=preview)

edited Oct 19, 2017 at 13:24

answered Oct 19, 2017 at 13:18

LLai

13.5k3 gold badges45 silver badges46 bronze badges

3 Comments

LLai Over a year ago

@cyberpirate92 forgot to add my plnkr

cyberpirate92 Over a year ago

Thanks @LLai, shallow copying works. I was wondering if there is any other way where I don't have to shallow copy in the parent component? I wonder how kendo-grid does it without an explicit shallow copy.

LLai Over a year ago

@cyberpirate92 I'm not familiar with kendo-grid, but it is probably not relying on the ngOnChanges hook. (plnkr.co/edit/G1dlSJqtcJ9NX7F44zaz?p=preview) In this plunkr you can see the child component does pick up changes in the ngFor. But in your case, since you have the extractRowsAndColumns method in your ngOnChanges hook, you are needing that to run.

Sumit Ramteke · Accepted Answer · 2018-06-15 11:06:53Z

0

You need to assign new object to it. Mostly can be done by Object.assign

In your example, you just need to change few line and rest will work smooth.

...
let data:[] = this.data;
data.push(o);
this.data = Object.assign([], data);
...

answered Jun 15, 2018 at 11:06

Sumit Ramteke

1,4961 gold badge17 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular: How to subscribe to @Input changes

5 Answers 5

Comments

1 Comment

7 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related