adding dynamically components to svg view

[Stéphane Ancelot]

Hi,

I am adding components to an svg view, but for some UNKNOWN reasons  they

 are not added INSIDE the svg component but after it (see screenshot)

html template :

<svg #mysvg viewBox="0 0 1000 1000" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp($event)">

<svg:defs>

<svg:linearGradient id="myLinearGradient1"

x1="0%" y1="0%"

x2="0%" y2="100%"

spreadMethod="pad">

<stop offset="10%" stop-color="#cccccc" stop-opacity="1"/>

<stop offset="30%" stop-color="#eeeeee" stop-opacity="1"/>

<stop offset="70%" stop-color="#eeeeee" stop-opacity="1"/>

<stop offset="90%" stop-color="#cccccc" stop-opacity="1"/>

</svg:linearGradient>

</svg:defs>

<svg:g gantt-bar width="100" (mousedown)="onMouseDown($event)"/>

<svg:g #arrow arrow />

</svg>

code 

@ViewChild('mysvg',{read: ViewContainerRef}) mysvgcontainer:ViewContainerRef;

ngAfterContentInit() {

let gantt_bar = this._cr.resolveComponentFactory(GanttBarComponent);

for (let n=0;n < this.sequences.length;n++)

{

console.log("create new component",n);

let componentref = this.mysvgcontainer.createComponent(gantt_bar);

(<GanttBarComponent>componentref.instance).y = 10*n;

}

}

[Sander Elias]

Hi Stéphane,

Hmm, interesting. Can you put this in a stackBlitz, so I can take a swing at it?

It might be that you are using SVG.  There is an accepted PR that will make it possible to use SVG as a template directly. IIRC that's there because of a similar issue.

Regards

Sander

[Stéphane Ancelot]

here is a stackblitz link. https://angular-gvwcfu.stackblitz.io

however, There is something not really clean I think.

the component  to create dynamically uses g[] as selector.

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/0U1Mwi5HBMk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Stéphane,

Hmm, I see the issue, but I don't have a way around yet. I'm going to play with this some more, and see if I can get a specialist on it!

Regards

Sander

[Sander Elias]

Question,

Can you solve your issue like this: https://stackblitz.com/edit/angular-eydtvf?file=src%2Fapp%2Fapp.component.ts

[Stéphane Ancelot]

This solves my problem at the moment. But the idea was to keep the application composant oriented.

I was following this issue 

https://github.com/angular/angular-cli/issues/10567#issuecomment-449568450

But I don't know if it will solve it.

 

Le ven. 15 mars 2019 à 21:12, Sander Elias <sande...@gmail.com> a écrit :

Question,

Can you solve your issue like this: https://stackblitz.com/edit/angular-eydtvf?file=src%2Fapp%2Fapp.component.ts

--