CODEWITHSUNDEEP
angulartypescriptngonchanges
FrozzenFinger
FrozzenFinger

Reputation: 1540

ngOnChanges is not triggered

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 ?

Upvotes: 1

Views: 270

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39482

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

Upvotes: 2

Related Questions