What is the difference between SimpleChanges and SimpleChange in Angular 5?

Well, they both import from the same place...

import { Component, Input, OnChanges, SimpleChanges, SimpleChange }
      from "@angular/core";

 
 

...but it is not fair to think of SimpleChanges as a collection of SimpleChange as it is not that, forgive me, simple. There will be a few SimpleChange types inside of a SimpleChanges type, but SimpleChanges is not an array of SimpleChange. Let me explain by telling you about a problem I was trying to solve today. In a Russian doll orchestration of Angular components in which a left nav and a graph with some breadcrumbs on it were nested inside an overarching manager, when the left nav's checkboxes where emptied out, the left nav needed to communicate up to the middleman via an EventEmitter and then down into the chart via an Input in order to smack the chart into reacting.

 
 

Specifically, I needed to just drop all of the chart breadcrumbs so in many ways I didn't need to send any complicated information up and then down again, I could just make SimpleChanges at the chart catch the right thing, perhaps a Date type. If the date was set to the immediate time in the left nav and was different when checked in the chart, that should do right?

public filtersModified(filters:any) {
   let isToClearFilter:boolean = false;
   if (Array.isArray(filters)) {
      isToClearFilter = true;
      filters.forEach((filter) => {
         if (filter.value && Array.isArray(filter.value)) {
            if (filter.value.length > 0) {
               isToClearFilter = false;
            }
         } else {
            isToClearFilter = false;
         }
      });
   }
   if (isToClearFilter) {
      this.clearAllFlag = new Date();
   }
}

 
 

This code would go in our middleman and react to an existing event bubbling up from the left nav. This approach is just as ghetto as can be. It makes for some really unintuitive code. The better thing to do is to hand over a complicated object and then let the component that needs it make sense of it. We will try this instead:

public filtersModified(event:any) {
      let isToChangeFilter:boolean = false;
      let filters:Array<SelectedFilterModel> = [];
      if (Array.isArray(event)) {
         isToChangeFilter = true;
         event.forEach((filter) => {
            if (filter.value && Array.isArray(filter.value)) {
               filters.push(<SelectedFilterModel>filter);
            } else {
               isToChangeFilter = false;
            }
         });
      }
      if (isToChangeFilter) {
         this.leftNavigationFilters = filters;
      }
}

 
 

We may use SimpleChanges and SimpleChange to make sense of things in the chart.

ngOnChanges(changes:SimpleChanges) {
   let leftNavigationFilters:string = 'leftNavigationFilters';
   if (changes[leftNavigationFilters]) {
      let change:SimpleChange = <SimpleChange>changes[leftNavigationFilters];
      let isToClearFilter:boolean = false;
      if (Array.isArray(change.currentValue)) {
         isToClearFilter = true;
         change.currentValue.forEach((filter) => {
            if (filter.value && Array.isArray(filter.value)) {
               if (filter.value.length > 0) {
                  isToClearFilter = false;
               }
            } else {
               isToClearFilter = false;
            }
         });
      }
      if (isToClearFilter) {
         this.resetSubTab();
      }
   }
}