Given that your components share the same parent, it is assumed that PRJ Shipping Component functions as a SMART component while the others are considered DUMB components (as they solely interact with input and output).
In order to achieve the desired functionality, you will need to include an output in reportingFilterComponent which emits the filter value. Subsequently, the event handler in PRJ Shipping Component should receive this value and pass it on as an input to tjl shipment component as demonstrated 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
}
}
Enhancement
To maintain the DUMB nature of the components, it is best practice for them not to engage in any HTTP calls. Therefore, it is recommended that the PRJ Shipping Component handle the filtering operation and simply pass the filtered data to tjl-shipment.component.
Alternative Approach
An alternative solution could involve creating a service to manage data sharing between components and notifying changes. However, in this scenario, such complexity may not be necessary.