We Keep Coding

Unable to find Vuejs equivalent function for the diagram from Angular

I tried a lot but was unable to find a solution. Please help me as I am struck on this issue for more than 1 day. Any help would be really appreciated.
I have a Syncfusion application that has been developed using Angular, now I would like to convert that application into Vuejs so trying to convert it but I am facing lot of issue as I am unable to find the 1:1 mapping of the ejsdiagram methods.
In Angular I was using the following code and respective method:
<ej-diagram id="diagram" e-height="80vh" e-width="100%" e-nodeCollectionChange="nodeCollectionChange" e-connectorCollectionChange="connectorCollectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange" e-textChange="textChange"></ej-diagram>
Now I am using something like this in Vuejs:
<div id="app">
<ejs-diagram
id="diagram"
ref="diagramObj"
:width="width"
:height="height"
:collection-change="collectionChange"
:e-connector-collection-change="connectorCollectionChange"
/>
div>
I would like to know the Vuejs equivalent function for e-connectorCollectionChange, e-connectorTargetChange, etc, I searched a lot but could not find any documentation or maybe I missed something. Can someone please guide me through this?
Basically, I want to have something like this in my Vuejs+Syncfusion application. I have it in Angular+Syncfusion:

We have added the sample link to demonstrate how to add connector collection change and connector target change in the diagram. Instead of using connector collection change, we can use the collection change event which will be triggered when a new node or connector gets added to the diagram. Using the element argument in collection changed event args, we can able to find whether connector or node gets added to the diagram. For more information, please refer to the following documentation and the code snippet below.
<ejs-diagram style='display:block'
ref="diagramObject"
id="diagram"
:width='width'
:height='height'
:nodes='nodes'
:connectors='connectors'
:getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults'
:collectionChange="collectionChange"
:sourcePointChange="sourcePointChange"
:targetPointChange="targetPointChange"
:textEdit="textEdit">
</ejs-diagram>
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Events16960811600180
Documentation Link: https://ej2.syncfusion.com/vue/documentation/diagram/getting-started/
Sample Browser Link: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/diagram/diagram-events.html

How to append an HTML tag which contains attributes in angular 8

I started to learn Angular recently and I just started to code a project which contains some articles.
Articles are passed from backend completely. (a thing like it)
<p onclick="function" name="itsName" data-info="data">text</p>
its tags and all attributes are saved in DB exactly like the mentioned example.
Now I am looking to show this data through angular.
[innerHTML] is the common way everyone uses. but it does not render tag's attributes. so my code is not working!
this.content="<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >"+id+"</h2><div>";
But it shows a thing like it after render :
<div><h2 class='textAlignCenter'>"+id+"</h2><div>
but I am looking to get a result like it.
<div><h2 class='textAlignCenter' (click)='hello()' name='thisis' >changed content - >333</h2><div>

injecting dynamic html inside the components from index.html in angular 8

I am working on a web app. which has magnolia as CMS. i am still new here but i will explain the scenario.
magnolia is providing the index.html which has reference of the components.But for some of those components it also provides some additional html content. this additional content has to be shown inside the particular component's template. refer following for better understanding.(remember this is inside the index.html)
<my-component>
<div> this division has to be shown inside the my component template.</div>
</my-component>
I have tried following approaches till now.
trying to use - this apparently does not work as i have learnt recently that the angular is not the master of root template(index.html). so ng-content never works. correct me if i am wrong.
using shadow dom view encapsulation. I am not expert in this, but setting viewencapsulation = shadowdom and defining slot inside the component template fulfills my purpose. The only issue with this approach is the scope of this shadow element. it will be inside the shadow root which has its own scope so no global styles are applied inside it. i had to import all the global css for each such component, which makes the main.js go crazy in size.
can someone please suggest me if there is any better or other solution to this problem?

Have you tried using Input() values for that component?
index.html
<my-comp [myInputs]="'My Input HTML <b>Content</b>'">
your receiving component…
<div [innerHTML]="myInputs"></div>

On my side, I use <ng-content></ng-content> inside the component where I want to put my dynamic content.
Ex:
<app-help-tool>
<span i18n="##pictoTable_helpPictoList">Click on a picto to see its description.</span>
</app-help-tool>
And in HelpToolComponent.ts:
<div
class="help_content"
*ngIf="this.isVisible && this.helpService.isHelpOn()"
[#showHideHelp]
(click)="showHideHelp()"
>
<ng-content></ng-content>
</div>
The result is to put the span content into the div of the component.

ReactJS / jQuery get HTML

I just wanted to get the HTML from a ReactJS component. I use a jquery module that need some HTML as parameter. I'm using coffeescript and ReactJS for the rest of the application.
Action = React.createClass
render: -> [...]
componentDidMount: ->
$(myJQueryModule).action(
html: $(#props.html).html()
)
Action
html: React.DOM.span {className: "test"}, "test of text"
Btw, this is not working and I have some troubles to understand why. Can someone help :) ?
Ty

A component doesnt get rendered to text like that, You probably want to use http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostring
But is wont have any React integrations and events etc, so you might be better by just use normal HTML in a string to feed to the jquery.

Javascript - Execute HTML/Angular ng-include

I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.
I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!
document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

read about angularjs $compile function

I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.
You could do something like this:
// somewhere in your controller
$scope.triggerSomeInclude = true;
// in your template
<div ng-if="triggerSomeInclude">
<div ng-include ="'someFile.html'"></div>
</div>
Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.
Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer:
"Thinking in AngularJS" if I have a jQuery background?

In the end, the method I used was templating example used for ngInclude.
http://docs.angularjs.org/api/ng.directive:ngInclude
Inside my controller, for example, by default it would set the following:
$scope.mainDivTemplate = {url: 'partials/test1.html'}
If I wanted to switch it to something else, I'd call a function that would look a little something like this.
$scope.loadHome = ->
$scope.mainDivTemplate = {url: 'partials/home.html'}
$scope.$apply()