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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular JS template binding with HTML and Native node

Platform: JavaScript |
Control: ejDiagram |
Published Date: November 28, 2015 |
Last Revised Date: May 30, 2019

Angular JS template binding with HTML node

You can able to bind data to the template of a HTML node using $parent scope. The following code illustrates how to bind data to the template of HTML node at the initialization.


<script id="htmlTemplate" type="text/ng-template">        
<div ng-controller="diagram">
            Name: <input type="text" ng-model="name"><br/>
        <div class="content-container-fluid">
            <div class="row">
                <div class="cols-sample-area">
                    <ej-diagram id="diagramCore" e-height="301px" e-width="501px" e-nodes="nodes"



angular.module('syncApp', ['ejangular']).controller('diagram', function ($scope) {
    $scope.pageSettings = {
        pageWidth: 500,
        pageHeight: 300,
        pageBackgroundColor: "White",
    $scope.name = "Html Node";
    $scope.nodes = [{ name: "node1", height: 100, width: 100, offsetX: 200, offsetY: 100, type: "html", templateId: "htmlTemplate" }];


The following screenshot displays the Html Node binding with a text-box.

Html node binding with a text box


In the above sample, on changing textbox’s text results in text change in the html node.


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon