I am observing the following structure in the code:
<div id="join-container">
<join-chain
id="my-join-chain"
[selectedColumn]="selectedColumn"
(updatedStatements)=onUpdatedStatements($event)>
</join-chain>
<tile-canvas
id="my-tile-canvas"
[mystatements]="theStatements"
(selectedColumn)="onSelectedColumn($event)">
</tile-canvas>
</div>
The parent's TypeScript (ts) code:
onUpdatedStatements(statements: Relational.JoinStatement[]) {
this.theStatements = statements;
console.log(">> fired from step-joining")
console.log(this.theStatements)
}
Now, let's look at the child component:
...
mappings: Mapping[] = []
@Input() set mystatements(someStatements: Relational.JoinStatement[] | undefined) {
console.log(">> tile canvas interceptor")
console.log(someStatements)
if (someStatements !== undefined) {
let idsFromStatements = someStatements
.map(statement => [statement.leftTile, statement.rightTile])
.filter(mapping => (mapping[0] !== undefined) && (mapping[1] !== undefined)) as ([Relational.tileId, Relational.tileId])[]
this.mappings = idsFromStatements.map(ids => new Mapping(ids))
}
}
I have noticed that the message fired from step-joining is being displayed multiple times while interacting with the application. In contrast, >> tile canvas interceptor only appears once, right after the first occurrence of fired from step-joining.
After going through several discussions and examples, it seems like the "interceptor" is triggered consistently every time.