{"id":2200,"date":"2014-04-01T15:48:59","date_gmt":"2014-04-01T11:48:59","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2200"},"modified":"2026-06-12T17:51:03","modified_gmt":"2026-06-12T14:51:03","slug":"gantt-chart-angularjs-app-dhtmlxgantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/gantt-chart-angularjs-app-dhtmlxgantt\/","title":{"rendered":"Interactive Gantt Chart with AngularJS and dhtmlxGantt"},"content":{"rendered":"<p>Last time we explained how to use dhtmlxScheduler with <a title=\"AngularJS - JavaScript MVW Framework\" href=\"https:\/\/angularjs.org\/\">AngularJS<\/a>, a popular JavaScript MVW framework. In this tutorial, we will guide you through adding an interactive Gantt chart to an AngularJS app using <a title=\"dhtmlxGantt Homepage\" href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\">DHTMLX Gantt<\/a>. The Gantt component is available in both free and paid editions. The free <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/open-source\/\" rel=\"noopener\" target=\"_blank\">Community Edition<\/a> is distributed under the MIT license, which allows using the core Gantt functionality in commercial and open-source projects. The PRO Edition comes with a powerful pack of advanced features and professional tech support offered under commercial DHTMLX licenses.<\/p>\n<blockquote><p>\n<em><strong>Note:<\/strong> This tutorial is outdated and targets AngularJS (1.x), which is no longer officially supported. For modern Angular projects, please use the up-to-date guide on <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/integrations\/angular\/howtostart-angular\/\" rel=\"noopener\" target=\"_blank\">integrating DHTMLX Gantt with Angular<\/a> provided in the official documentation. You can also check the <a href=\"https:\/\/github.com\/DHTMLX\/angular-gantt-demo\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt with Angular demo<\/a> on GitHub.<\/em>\n<\/p><\/blockquote>\n<p><a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\"><br \/>\n  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3693\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/08\/download-gantt-banner.png\" alt=\"download gantt\" width=\"900\" height=\"300\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/08\/download-gantt-banner.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/08\/download-gantt-banner-300x100.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/08\/download-gantt-banner-768x256.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><br \/>\n<\/a><\/p>\n<p>You can <a title=\"View the demo - dhtmlxGantt with AngularJS\" href=\"https:\/\/github.com\/DHTMLX\/angular-suite-demo\">check the online demo<\/a>, or just <a title=\"Download the demo - dhtmlxGantt with AngularJS\" href=\"https:\/\/github.com\/DHTMLX\/angularjs-gantt-demo\">grab the final demo from GitHub<\/a>.<\/p>\n<blockquote>\n<h5>What would you like to see in our next articles about dhtmlxGantt?<\/h5>\n<p>We need your feedback to provide the right integrations at the right time. Please leave your requests here:<\/p>\n<p>  <a class=\"typeform-share button button-primary\"  href=\"https:\/\/dhtmlx.typeform.com\/to\/D3AU2V\" target=\"_blank\" data-mode=\"drawer_right\">Request Integration<\/a><br \/>\n  <script>\n    (function () { var qs, js, q, s, d = document, gi = d.getElementById, ce = d.createElement, gt = d.getElementsByTagName, id = \"typef_orm_share\", b = \"https:\/\/embed.typeform.com\/\"; if (!gi.call(d, id)) { js = ce.call(d, \"script\"); js.id = id; js.src = b + \"embed.js\"; q = gt.call(d, \"script\")[0]; q.parentNode.insertBefore(js, q) } })();\n  <\/script>\n<\/p><\/blockquote>\n<h3>Adding dhxGantt Directive<\/h3>\n<p>To build a custom HTML component in AngularJS, we need to create a new directive. So we start the integration of dhtmlxGantt from writing a directive for it. For that, we create a .js file with the following content:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">app.directive('dhxGantt', function() {<br \/>\n&nbsp; return {<br \/>\n&nbsp; &nbsp; restrict: 'A',<br \/>\n&nbsp; &nbsp; scope: false,<br \/>\n&nbsp; &nbsp; transclude: true,<br \/>\n&nbsp; &nbsp; template: '&lt;div ng-transclude&gt;&lt;\/div&gt;',<br \/>\n&nbsp; &nbsp; link: function ($scope, $element, $attrs, $controller) {<br \/>\n&nbsp; &nbsp; &nbsp; \/\/size of gantt<br \/>\n&nbsp; &nbsp; &nbsp; $scope.$watch(function() {<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; return $element[0].offsetWidth + &quot;.&quot; + $element[0].offsetHeight;<br \/>\n&nbsp; &nbsp; &nbsp; }, function() {<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; gantt.setSizes();<br \/>\n&nbsp; &nbsp; &nbsp; });<br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; \/\/init gantt<br \/>\n&nbsp; &nbsp; &nbsp; gantt.init($element[0]);<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; }<br \/>\n});<\/div><\/div>\n\n<\/pre>\n<p>This is what the above code does:<\/p>\n<ul>\n<li>the code defines a new directive which can be used as a custom attribute<\/li>\n<li>the new directive will initialize dhtmlxGantt in the target container<\/li>\n<li>the <i>$watch<\/i> function will check the size of dhtmlxGantt&#8217;s container and will resize the component when the size of the HTML container is changed<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>If we just need to create an instance of dhtmlxGantt on a page, the above code is enough. We just need to place the directive somewhere on the page. If we need to create a simple AngularJS app with a Gantt chart inside, we need the following HTML code structure:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-HTML\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">&lt;!doctype html&gt;<br \/>\n&lt;html ng-app=&quot;ganttApp&quot;&gt;<br \/>\n&lt;head&gt;<br \/>\n&nbsp; &lt;title&gt;AngularJS Gantt chart demo&lt;\/title&gt;<br \/>\n&nbsp; &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.6\/angular.min.js&quot;&gt;&lt;\/script&gt;<br \/>\n&nbsp; &lt;script src=&quot;https:\/\/cdn.dhtmlx.com\/gantt\/edge\/dhtmlxgantt.js&quot;&gt;&lt;\/script&gt;<br \/>\n&nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.dhtmlx.com\/gantt\/edge\/dhtmlxgantt.css&quot;&gt;<br \/>\n&nbsp; &lt;script src=&quot;js\/app.js&quot;&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&nbsp; &lt;div dhx-gantt style=&quot;height: 350px; width: 100%;&quot;&gt;&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/div><\/div>\n\n<\/pre>\n<p>If you look at the code above, you&#8217;ll see that we included the .js and .css files of both the AngularJS framework and the dhtmlxGantt component. The <i>dxhGantt<\/i> directive, which we created earlier, is used in the code of the page. The <i>dhx-gantt<\/i> attribute is used to trigger the directive and to initialize the dhtmlxGantt component on the page. Now, if you open a page with the described HTML code in a browser, you can see the Gantt chart but without any data yet:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2207\" src=\"https:\/\/www.dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-2.png\" alt=\"dhtmlxGantt with AngularJS - Empty Gantt Chart\" width=\"600\" height=\"208\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-2.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-2-300x104.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h3>Linking to a Scope<\/h3>\n<p>At this stage the DHTMLX Gantt chart just renders itself on a page, which is good but not quite useful yet. To expand the functionality of our demo app, we now need to link the content of the Gantt chart to the scope. So we extend the link method of the directive like this:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">link: function ($scope, $element, $attrs, $controller) {<br \/>\n&nbsp; \/\/watch data collection, reload on changes<br \/>\n&nbsp; $scope.$watch($attrs.data, function(collection) {<br \/>\n&nbsp; &nbsp; gantt.clearAll();<br \/>\n&nbsp; &nbsp; gantt.parse(collection, &quot;json&quot;);<br \/>\n&nbsp; }, true);<br \/>\n<br \/>\n&nbsp; \/\/size of gantt<br \/>\n&nbsp; $scope.$watch(function() {<br \/>\n&nbsp; &nbsp; return $element[0].offsetWidth + &quot;.&quot; + $element[0].offsetHeight;<br \/>\n&nbsp; }, function() {<br \/>\n&nbsp; &nbsp; gantt.setSizes();<br \/>\n&nbsp; });<br \/>\n<br \/>\n&nbsp; \/\/init gantt<br \/>\n&nbsp; gantt.init($element[0]);<br \/>\n}<\/div><\/div>\n\n<\/pre>\n<p>The new block of code at the top will monitor the state of data collection and reload the Gantt chart with new data when collection is changed.<\/p>\n<p>After applying such changes we can load data from the scope to the Gantt chart:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">app.controller('MainSchedulerCtrl', function($scope) {<br \/>\n&nbsp; $scope.tasks = {<br \/>\n&nbsp; &nbsp; data:[<br \/>\n&nbsp; &nbsp; &nbsp; {id:1, text:&quot;Project #2&quot;, start_date:&quot;01-04-2018&quot;, duration:18, order:10, progress:0.4, open: true},<br \/>\n&nbsp; &nbsp; &nbsp; {id:2, text:&quot;Task #1&quot;, start_date:&quot;02-04-2018&quot;, duration:8, order:10, progress:0.6, parent:1},<br \/>\n&nbsp; &nbsp; &nbsp; {id:3, text:&quot;Task #2&quot;, start_date:&quot;11-04-2018&quot;, duration:8, order:20, progress:0.6, parent:1}<br \/>\n&nbsp; &nbsp; ],<br \/>\n&nbsp; &nbsp; links:[<br \/>\n&nbsp; &nbsp; &nbsp; { id:1, source:1, target:2, type:&quot;1&quot;},<br \/>\n&nbsp; &nbsp; &nbsp; { id:2, source:2, target:3, type:&quot;0&quot;},<br \/>\n&nbsp; &nbsp; &nbsp; { id:3, source:3, target:4, type:&quot;0&quot;},<br \/>\n&nbsp; &nbsp; &nbsp; { id:4, source:2, target:5, type:&quot;2&quot;}<br \/>\n&nbsp; &nbsp; ]<br \/>\n&nbsp; };<br \/>\n});<\/div><\/div>\n\n<\/pre>\n<p>Now we have a Gantt chart populated with data. The next step will be customizing the appearance of tasks in the chart.<\/p>\n<h3>Defining the Look of Tasks<\/h3>\n<p>It&#8217;s time to define the content and appearance of tasks in the Gantt chart. To specify the look of tasks, we will use dhtmlxGantt JavaScript API for templating. The following code will define one more directive which can be used to define the templates of our Gantt chart:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">app.directive('ganttTemplate', ['$interpolate', function($interpolate) {<br \/>\n&nbsp; return {<br \/>\n&nbsp; &nbsp; restrict: 'AE',<br \/>\n&nbsp; &nbsp; terminal: true,<br \/>\n&nbsp; &nbsp; link: function($scope, $element, $attrs, $controller) {<br \/>\n&nbsp; &nbsp; &nbsp; var interpolated = $interpolate($element.html());<br \/>\n&nbsp; &nbsp; &nbsp; gantt.templates[$attrs.ganttTemplate] = function(start, end, task) {<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; return interpolated({task: task});<br \/>\n&nbsp; &nbsp; &nbsp; };<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; };<br \/>\n}]);<\/div><\/div>\n\n<\/pre>\n<p>This code defines the <em>ganttTemplate<\/em> directive. This directive can be used both as an attribute or as a custom tag. The content of the directive will be compiled to JavaScript function using the <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$interpolate\" target=\"_blank\">&#8216;$interpolate service&#8217;<\/a> and used as a template of the Gantt chart. To specify the template for the Gantt chart, you can use <a href=\"https:\/\/docs.angularjs.org\/guide\/templates\" target=\"_blank\">Angularjs template syntax<\/a>.<\/p>\n<p>For instance, we can add this piece of code on the page:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">&lt;gantt-template name=&quot;task_text&quot;&gt;<br \/>\n&nbsp; &lt;div&gt;{{task.text | uppercase}} - &lt;strong&gt;{{task.duration}} days&lt;\/strong&gt;&lt;\/div&gt;<br \/>\n&lt;\/gantt-template&gt;<\/div><\/div>\n\n<\/pre>\n<p>If we now reload the page with our demo app, we should see the following:<\/p>\n<p>  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2210\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-3.png\" alt=\"dhtmlxGantt with AngularJS - Custom Template\" width=\"600\" height=\"174\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-3.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-3-300x87.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>The name of &#8220;gantt-template&#8221; attribute is a name of dhtmlxGantt&#8217;s template which needs to be defined. You can find the list of available templates in the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__templates.html\">dhtmlxGantt documentation<\/a>.<\/p>\n<p>NOTE: the template defined in such a way does not have the full functionality of a native AngularJS template. You should consider the following points:<\/p>\n<ul>\n<li>You need to use the format of the type <em>{{task.some}}<\/em> to define the template. Instead of &#8220;<em>some<\/em>&#8220;, place the necessary property of task object. &#8220;<em>task<\/em>.&#8221; in our example is a fixed part that is used only by the Gantt chart to define the task&#8217;s property. It is not related to the current scope.<\/li>\n<li>The scope&#8217;s variables can&#8217;t be used inside of the template.<\/li>\n<\/ul>\n<h3>Grid Configuration<\/h3>\n<p>One more thing which can be done is configuration of the grid in dhtmlxGantt. We can add one more directive (actually two directives) to configure the columns and data in them.<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">app.directive('ganttColumn', ['$interpolate', function($interpolate) {<br \/>\n&nbsp; return {<br \/>\n&nbsp; &nbsp; restrict: 'AE',<br \/>\n&nbsp; &nbsp; terminal: true,<br \/>\n&nbsp; &nbsp; link: function($scope, $element, $attrs, $controller) {<br \/>\n&nbsp; &nbsp; &nbsp; var label = $attrs.label || &quot; &quot;;<br \/>\n&nbsp; &nbsp; &nbsp; var width = $attrs.width || &quot;*&quot;;<br \/>\n&nbsp; &nbsp; &nbsp; var align = $attrs.align || &quot;left&quot;;<br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; var interpolated = $interpolate($element.html());<br \/>\n&nbsp; &nbsp; &nbsp; var template = function(task) {<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; return interpolated({ task: task });<br \/>\n&nbsp; &nbsp; &nbsp; };<br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; var config = { template: template, label: label, width: width, align: align };<br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; if (!gantt.config.columnsSet)<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; gantt.config.columnsSet = gantt.config.columns = [];<br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; if (!gantt.config.columns.length)<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; config.tree = true;<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; gantt.config.columns.push(config);<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; };<br \/>\n}]);<\/div><\/div>\n\n<\/pre>\n<p>The above code is very similar to <em>ganttTemplate<\/em> directive. It takes attributes from the tag, converts the content of the tag to the template and creates a new column in the grid&#8217;s configuration.<\/p>\n<p>In addition to data columns, dhtmlxGantt can have extra column with &#8220;add task&#8221; icon. To add such a column, we can create a separate directive:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-JavaScript\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">app.directive('ganttColumnAdd', [function() {<br \/>\n&nbsp; return {<br \/>\n&nbsp; &nbsp; restrict: 'AE',<br \/>\n&nbsp; &nbsp; terminal: true,<br \/>\n&nbsp; &nbsp; link: function() {<br \/>\n&nbsp; &nbsp; &nbsp; gantt.config.columns.push({ width:45, name:&quot;add&quot; });<br \/>\n&nbsp; &nbsp; }<br \/>\n&nbsp; }<br \/>\n}]);<\/div><\/div>\n\n<\/pre>\n<p>With the above JS code, we can configure the grid columns through HTML code like this:<\/p>\n<pre>\n\n<div class=\"codecolorer-container text default lang-html\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"text codecolorer\">&lt;div dhx-gantt data=&quot;tasks&quot; style=&quot;height: 300px; width: 100%;&quot;&gt;<br \/>\n&nbsp; &lt;gantt-column label=&quot;Task&quot; width=&quot;200&quot; align=&quot;left&quot;&gt;<br \/>\n&nbsp; &nbsp; &lt;div&gt;{{task.text | lowercase}}&lt;\/div&gt;<br \/>\n&nbsp; &lt;\/gantt-column&gt;<br \/>\n&nbsp; &lt;gantt-column label=&quot;Duration&quot; width=&quot;80&quot; align=&quot;center&quot;&gt;<br \/>\n&nbsp; &nbsp; &lt;div align=&quot;center&quot;&gt;{{task.duration}}&lt;\/div&gt;<br \/>\n&nbsp; &lt;\/gantt-column&gt;<br \/>\n&nbsp; &lt;gantt-column-add&gt;&lt;\/gantt-column-add&gt;<br \/>\n&lt;\/div&gt;<\/div><\/div>\n\n<\/pre>\n<p>With such a configuration, the Gantt chart will look like this:<\/p>\n<p>  <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2211\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-4.png\" alt=\"dhtmlxGantt with AngularJS - Custom Grid\" width=\"600\" height=\"174\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-4.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/03\/gantt-chart-angularjs-4-300x87.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><strong><a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\">Download dhtmlxGantt to add a powerful Gantt chart to your app<\/a><\/strong><\/p>\n<h3>Summing Up<\/h3>\n<p>Although AngularJS doesn&#8217;t provide rich user interface widgets, we can add such a widget with the help of some additional code. This tutorial showed how using the custom directives (<em>dhxGantt<\/em>, <em>ganttTemplate<\/em>, <em>ganttColumn<\/em> and <em>ganttColumnAdd<\/em>), you can easily add an editable Gantt chart on the page and customize its appearance.<\/p>\n<p>The above described functionality of the Gantt chart library shows only the basic features. dhtmlxGantt has a rich API and lot of properties and events. It makes no sense to wrap all of them into AngularJS directives, as you can easily make any necessary calls from Angular controller&#8217;s code (find the details of the dhtmlxGantt API in the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api__refs__gantt.html\">documentation<\/a>).<\/p>\n<p>With a bit of code, you can integrate dhtmlxGantt in an AngularJS app and get an interactive Gantt chart for project scheduling needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last time we explained how to use dhtmlxScheduler with AngularJS, a popular JavaScript MVW framework. In this tutorial, we will guide you through adding an interactive Gantt chart to &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3799,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,40,20,14,60],"class_list":["post-2200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-angularjs","tag-gantt","tag-tips","tag-integrations-gantt"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2200"}],"version-history":[{"count":14,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2200\/revisions"}],"predecessor-version":[{"id":15683,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2200\/revisions\/15683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3799"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}