Passing Data between sibling components

Question

I am trying to pass data between two sibiling components and the component structure looks like below. I need to pass the data between two sibling components,

I dont want to make the component to be parent child instead I need to pass the data between sibling components

But when the button is clicked I get the error:

TypeError: Cannot read property 'settDate' of undefined

Not sure if we are missing anything here

Answer 1

Since your components are under same parent, I assume PRJ Shipping Component is a SMART component and the rest are DUMB components (they only interact with Input and Output)

So you need to add an Output to reportingFilterComponent and emitting the filter value, then PRJ Shipping Component has event handler to get the value, and pass it as Input to tjl shipment component something like below

reportingFilterComponent.ts

@Output() filterChange : EventEmitter<ShipDateFilterModel[]> = new EventEmitter<ShipDateFilterModel[]>()

filterButtonClick() {
  this.filterChange.emit(/. your filter value../);
} 

PRJ Shipping Component.html

<app-reporting (filterChange)="onFilterChange($event)"></app-reporting>

<app-tjl-shipment [filter]="filter"></app-tjl-shipment>

PRJ Shipping Component.ts

filter: ShipDateFilterModel[];

onFilterChange(event:ShipDateFilterModel[]) {
   this.filter = event;
}

tjl-shipment.component.ts

@Input() filter: ShipDateFilterModel[];

ngOnChanges(changes: SimpleChanges) {

  if (changes.filter && changes.filter.currentValue) {
     // do whatever is needed
  }
}

Improvement

For keeping the DUMB component DUMB, they shouldn't do any http call or something. so being said it better to PRJ Shipping Component receives the filter value and do the filter operation and just passing filtered data to tjl-shipment.component

Another solution

You can create a service to keep the data between components and informing the changes, but in your case it's a needless complexity