We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. HTML inside connector of Diagram: Angular 7+ & TypeScript 3+

HTML inside connector of Diagram: Angular 7+ & TypeScript 3+

Hi,

Is there any way to generate HTML on a connector and preferably inside or just like the usage/location of annotation.
Im trying to add a progress bar(from Angular Material) so that it shows me the current realtime percentage of a call in progress.

Tried a progressbar component & image in each example:
  htmlcontent: string = '<mat-progress-bar mode="determinate" value=this.amount></mat-progress-bar>'></div>';
//1 doesnt do anything
  const connector: ConnectorModel = {
                    shape: { type: 'HTML', content: this.htmlcontent }, //??
                    annotations: [];
                    type: "Straight",
              //etc
  }
//2 just generates a string
  const connector: ConnectorModel = {
                      annotation: [{content: '<mat-progress-bar mode="determinate" value=this.amount></mat-progress-bar>'}],
                    type: "Straight",
              //etc
   }


Thanks in advance!

greetings,

Laurens Albers

8 Replies
RT Ramya Thirugnanam Syncfusion Team December 5, 2018 11:53 AM UTC

Hi Laurens,    
Requirement : html element in node. 
We can host the html element in nodemodel alone not with the connector. We have created a simple sample to represent the requirement. Please refer to the sample from the following link.    
This sample explains the binding with properties using class.    
HTML Binding:  
We have provided binding using HTML also and please refer to the below code example. The “ngAfterViewInit” method will be only effective when Diagram is rendered.  
  
To create HTML element (button): The below div should be defined before diagram div.  
  
<div id='button_div' style="height:100%;width:100%;border:none; background-color:white;"><img src="./app/diagram/diagram/Nodes_1.png" width="100%;height:50px"/></div>  
Angular : To get the button and show as content of the Node  
ngAfterViewInit(): void {   
let node: NodeModel = this.diagram.nodes[6];   
//  ‘button_div’ id of div which want to show as content of node.   
node.shape = { type: 'HTML', content: document.getElementById('button_div') };   
this.diagram.dataBind();   
}   
   
   
For more details about shape of Node, please refer to the below help documentation  link.  
  
  
Regards,   
Ramya T   


LA Laurens Albers December 5, 2018 02:52 PM UTC

Hi,

thank you for your response!

Any idea if you will be implementing this feature in the near future?
It would be greatly appreciated.


greetings,

Laurens

RT Ramya Thirugnanam Syncfusion Team December 6, 2018 06:32 AM UTC

Hi Laurens, 
 
The Shape can be applied to node and port kind of features alone.   
 
Could you please provide the scenarios/need to apply html elements as part of connector? This will help us to investigate on  the scenario and we will provide appropriate solution. 
 
Regards, 
Ramya T 


LA Laurens Albers December 6, 2018 10:43 AM UTC

We are making a webapplication version of a existing application(wpf).
For the application I need to create a progressbar, which is being updated with data being passed every second or so. This is done ON the connector to show the user about the progress(from the SourceID) that is being done, It cannot be done on the node itself, because there could be multiple connection leading to each node.
That's why the connector would be preferred.

For now i have created a simple tryout function where i'm using another set of nodes is being pushed based on the center(x,y) of a connector.
For html, i have used the simple "bootstrap" progressbar to show the bar. But in the following example i will just use "the value"

 for (let item of this.diagram.connectors) {
      const obj1 = item['intermediatePoints'][0];
      const obj2 = item['intermediatePoints'][1];
      const sum1 = (obj1['y'] + obj2['y']) / 2;
      const sum2 = (obj1["x"] + obj2['x']) / 2;
      const randomId = Math.random().toString(36).slice(5, 10); //create 5 random characters/numbers
      const node: NodeModel = {
        id: "loading" + randomId,
        width: 200,
        data: { value: value },
        height: 100,
        offsetX: sum2,
        offsetY: sum1,
        shape: {
          type: 'HTML',
          content: `${value}`
        },
      }
      this.diagram.add(node);
    }
    this.updateTimer();

After adding the node, another tryout function which uses setInterval() until "100" is reached.

  updateTimer() {
    for (let item of this.diagram.nodes) {
      const name = item.id.slice(0, -5);
      if (name === 'loading') {
        var timer = setInterval(() => {
          if (item.data['value'] !== 100) {
            item.data['value'] += 10;
            console.log(item.data['value']);
this.diagram.dataBind()?? // update node/html is not working? Any idea?
          } else {
            clearInterval(timer);
          }
        }, 500);
      }
    }



RT Ramya Thirugnanam Syncfusion Team December 6, 2018 12:21 PM UTC

Hi Laurens, 
 
Thanks for sharing the requirement details. 
 
Connector will not allow to define shape. But also, we can achieve the requirement by using Annotation of Connector. We have implemented template support for Annotation and it supports to add html elements also. This feature is included in our Volume 4 2018 release which is tentatively scheduled on mid of December 2018. 
 
Regards, 
Ramya T 


LA Laurens Albers December 6, 2018 12:58 PM UTC

hi,

Ah, would be great! annotation of the connector is a great location to add html elements. 
Then I will wait for Volume 4. Thanks for your feedback!

greetings,

Laurens

RT Ramya Thirugnanam Syncfusion Team December 7, 2018 04:27 AM UTC

Hi Laurens, 
 
Thanks for your update. 
 
Regards, 
Ramya T 


RT Ramya Thirugnanam Syncfusion Team December 14, 2018 10:24 AM UTC

Hi Laurens,   
 
Requirement: Template support for annotation. 
 
 
We are glad to announce that our Essential Studio Volume 4 Beta, 2018 release (v16.4.0.40) has been rolled out and we have included the reported requirement with this Beta release. Please use the following link for download.   
Feature information : 
Diagram provides template support for annotation. you should define a SVG/HTML content as string in the annotation’s template property. 
We have provided sample and code example to set template for the annotation. 
Code example: 
// A connector is created and stored in connectors array. 
let connector: ConnectorModel = { 
    id: 'connector1', 
    sourcePoint: { 
        x: 300, 
        y: 100 
    }, 
    targetPoint: { 
        x: 400, 
        y: 300 
    }, 
    type: 'Orthogonal', 
    //Sets the annotation for the node 
    annotations: [{ 
        // Sets the template for a node 
        template: '<div><input type="button" value="Submit"></div>' 
    }] 
}; 
 
 
We thank and appreciate your patience for waiting for this release. Please get in touch with us if you would require any further assistance.   
 
Regards, 
Ramya T 


Loader.
Up arrow icon