set position for foreignObject in angular-CodePudding

Can't set position (x, y) for foreignObject in angular

i've tried like this:

<foreignObject width="65" height="50" x="{{position?.x}}" y="{{position?.y}}">
   <div >works!</div>
</foreignObject>

and

<foreignObject width="65" height="50" [x]="position?.x" [y]="position?.y">
   <div >works!</div>
</foreignObject>

but with bindings gets error:

Cannot set property x of [object SVGForeignObjectElement] which has only a getter

and it works if i set position like this:

<foreignObject width="65" height="50" x="100" y="100">
    <div >works!</div>
</foreignObject>

How can i set dynamycal position to foreignObject?

CodePudding user response：

I found decision

Needs add local reference to foreignObject

<foreignObject width="65" height="50" #foreignFirst> <- here
   <div #container >works!</div>
</foreignObject>

Then in ts file needs add viewChild and attribute:

@ViewChild('foreignFirst') foreignFirst: ElementRef;

this.foreignFirst.nativeElement.setAttribute('x', this.position.x);
this.foreignFirst.nativeElement.setAttribute('y', this.position.y);

CodePudding user response：

I suggest,your ForeignObject has x and y input properties ,you can set;

<foreignObject width="65" height="50" [x]="position.x" [y]="position.y">
   <div >works!</div>
</foreignObject>

!--- EDITED---!

Can you create x object as Input property at ForeignObject.Component.ts?

private _position:any;   
@Input()
public get x(){ return position};
    
public set x(position:any){
this._position=position;
}