In my child component, the id property is randomly set like this:
export class FileSelectionComponent implements AfterViewInit {
public type = 'app-file-selection';
public id = 'FileSelection#' + Math.random().toString(16).slice(2, 8);
@Input() jspinst: any;
public x;
public y;
public selected_file: string;
constructor(public dialog: MatDialog, private httpClient: HttpClient) {
this.selected_file = '';
console.log('constructor called');
console.log(this.id);
}
ngAfterViewInit() {
...
this.jspinst.addEndpoint(this.id, { anchor: 'Right'}, Endpoint1);
this.jspinst.addEndpoint(this.id, { anchor: 'Left'}, Endpoint2);
this.jspinst.draggable(this.id);
}
}
The parent component looks like this:
export class FlowComponent implements OnInit, AfterViewInit, OnChanges {
public nodes: Array<any>;
public jspl;
constructor() {
this.nodes = [];
this.jspl = jsPlumb.getInstance();
}
addNode(type) {
let nn = new FileSelectionComponent();
this.nodes = this.nodes.concat([nn]);
s = this.nodes;
console.log('object created and added');
}
ngAfterViewInit() {
s = this.nodes;
this.jspl.bind('connection', function (info) {
console.log(info.sourceId+' ----> '+info.targetId);
console.log(s[0].id+' ----> '+s[1].id);
console.log(Object.keys(s[0]));
console.log(Object.values(s[0]));
});
}
}
When I click a button to call the addNode method, the constructor for the FileSelectionComponent is triggered twice, generating two different ids. This makes it difficult to retrieve the correct nodes when the connection event is fired.
I have checked several solutions but none seem to work:
- The button has
type="button". - I am not bootstrapping both parent and child components.
- I have closed the selector tag in the host component's template.
- There is no
in my code.platformBrowserDynamic().bootstrapModule(AppModule); - No error messages are displayed by the compiler.
The template for the parent component is as follows:
<div id="cont">
<div *ngFor="let n of nodes">
<app-file-selection [jspinst]="jspl" *ngIf="n.type === 'app-file-selection'"></app-file-selection>
</div>
</div>
<button type="button" mat-icon-button matTooltip="Files selection" (click)="addNode('file-selection')"><mat-icon aria-label="Side nav toggle icon">insert_drive_file</mat-icon></button>
I have tried moving the random assignment inside the constructor (which causes two ids - one recognized by jsplumb and one received by the parent component), and within the OnInit (which results in just one id not known by the parent component).