ngOnChanges is not triggered

Question

Hello i am new to angular and having a little issue, here is my code :

import { Component, OnInit,Input, SimpleChange, OnChanges } from '@angular/core';
import { Sensor } from '../../shared/sensor.model';
import { MessageService } from '../../shared/message.service';

@Component({
  selector: 'app-sensor-list',
  templateUrl: './sensor-list.component.html',
  styleUrls: ['./sensor-list.component.css']
})
export class SensorListComponent implements OnInit {

  sensors:Sensor[]=[];
  sensorsId : number[]=[];
  @Input() messages:JSON[]=[];
  constructor(private messageService: MessageService) { }

  ngOnInit() {
    setInterval(()=>{
      this.messages=this.messageService.getMqttdata();
      console.log("updating Sensors sources")
    },5000);
  }

  ngOnChanges(changes SimpleChange }) {
      console.log("sources has been modified")
  }

In ngOnInit i gather data every 5 seconds and store those into my messages variable which is an Input() so it should trigger the ngOnChanges every 5 secs ? what am I missing ?

SiddAjmera · Accepted Answer · 2018-08-23T19:32:59.130

2

@Input properties are supposed to be something that the parent of this component will pass it. It isn't supposed to be received from a service right inside this component.

If that was the case, this service call should reside in the parent component that is using this component.

So if you have a component(say with selector: app-home), then inside the template of app-home, you'll be using app-sensor-list and you'll pass messages from there.

Something along the lines of this:

<app-sensor-list [messages]="messages"></app-sensor-list>

Again inside the app-home component's TypeScript class, you'll make the service call:

ngOnInit() {
    setInterval(()=>{
      this.messages=this.messageService.getMqttdata();
      console.log("updating Sensors sources")
    },5000);
}

edited Aug 23 '18 at 19:32

answered Aug 23 '18 at 19:28

SiddAjmera

38,129
5
72
110

my service is defined in the parent component providers so should i get the data into the parent component then bind the parent's related attribute to the one i want to trigger on changes ? if i am right can you show me how to do that ? – FrozzenFinger Aug 23 '18 at 19:31
Consider marking it as a solution if this solved your query. – SiddAjmera Aug 23 '18 at 19:40

ngOnChanges is not triggered

1 Answers1