{"id":470,"date":"2019-12-22T06:12:43","date_gmt":"2019-12-22T06:12:43","guid":{"rendered":"https:\/\/appfinz.com\/blogs\/?p=470"},"modified":"2025-05-15T04:49:50","modified_gmt":"2025-05-15T04:49:50","slug":"custom-directives-in-angular-7","status":"publish","type":"post","link":"https:\/\/www.appfinz.com\/blogs\/custom-directives-in-angular-7\/","title":{"rendered":"Custom Directives in Angular 7"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting started with Angular 7 Directives<\/h2>\n\n\n\n<p><a href=\"https:\/\/appfinz.com\/blogs\/custom-directives-in-angular-7\/\">Custom Directives in Angular 7<\/a> are the most powerful feature of any <a href=\"https:\/\/appfinz.com\/blogs\/category\/angularjs\/\">Angular 7 <\/a>applications. In fact, the most commonly used feature, which is composed, is itself a Custom directive. There are basically three types of directives:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Component<\/code>\u00a0directive \u2013 a directive with templates.<\/li>\n\n\n\n<li><code>Attribute<\/code>\u00a0directive \u2013 \u00a0a directive that manipulates DOM by changing behavior and appearance directive \u2013 a directive that creates and destroys the DOM element <\/li>\n<\/ul>\n\n\n\n<p><code>Component<\/code>&nbsp;directive is what we are using it in our day to day programming since Angular 2. So, I am going to skip discussing about&nbsp;<code>Component<\/code>&nbsp;the directive. In this post, we will briefly discuss the rest of the two directives:&nbsp;<code>Attribute<\/code>&nbsp;and&nbsp;<code>Structural<\/code>&nbsp;directives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structural Angular Directives<\/h3>\n\n\n\n<p><code>Structural<\/code>&nbsp;directives are used to add, remove or manipulate the elements from the DOM. It is easy to identify structural directives. Structural directives are prefixed by an asterisk (*) with the directive name. Example of structural directives are :&nbsp;<code>NgIf<\/code>,&nbsp;<code>NgSwitch<\/code>&nbsp;&amp;&nbsp;<code>NgFor<\/code>. These are inbuilt structural directives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Attribute Angular Directives<\/h3>\n\n\n\n<p><code>Attribute<\/code>&nbsp;directives are used to change the behavior and appearance of an DOM element. As the name suggests, they are applied as an attribute on the DOM element.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;Angular&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;p [style.color]=&quot;'red'&quot;&gt;attribute directive&lt;\/p&gt;&lt;p [hidden]=&quot;shouldHide&quot;&gt;attribute directive&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Angular Directive<\/h3>\n\n\n\n<p>Let\u2019s create our first custom directive. To generate the directive, run this command in the command terminal.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;Terminal&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">ng generate directive color<\/pre><\/div>\n\n\n\n<p>This command will generate a&nbsp;<code>color.directive.ts<\/code>&nbsp;file in the app folder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>color.directive.ts<\/em><\/h4>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;Typescript&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">import { Directive } from '@angular\/core'; @Directive({  selector: '[appColor]'})export class ColorDirective {   constructor() { } }<\/pre><\/div>\n\n\n\n<p>In the first line, Angular CLI imported&nbsp;<code>Directive<\/code>&nbsp;from&nbsp;<code>@angular\/core<\/code>&nbsp;package. This will provide the&nbsp;<code>@Directive<\/code>&nbsp;decorator.<\/p>\n\n\n\n<p>The name of our directive is&nbsp;<code>appColor<\/code>&nbsp;in the [] selector. <a href=\"https:\/\/angular.io\/\">Angular<\/a> will look for this attribute on the HTML element and applies the directive logic to that element. This directive has a class name&nbsp;<code>ColorDirective<\/code>.<\/p>\n\n\n\n<p>This command will also add an entry in our&nbsp;<code>app.module.ts<\/code>&nbsp;file as well. See the line 7 and 13 in&nbsp;<code>app.module.ts<\/code>&nbsp;file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>app.module.ts<\/em><\/h4>\n\n\n\n<p>Let\u2019s put some code logic in our appColor directive. We are going to make the background color of an element Red. So, our directive code looks like this:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>color.directive.ts<\/em><\/h4>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;Typescript&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">import { Directive, ElementRef } from '@angular\/core'; @Directive({  selector: '[appColor]'})export class ColorDirective {   constructor(el: ElementRef) {     el.nativeElement.style.backgroundColor = 'red';  }}<\/pre><\/div>\n\n\n\n<p>If you notice in line first, we also imported&nbsp;<code>ElementRef<\/code><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">import { Directive, ElementRef } from '@angular\/core';<\/pre><\/div>\n\n\n\n<p>and injected this in our directive class constructor in order to access the element, on which this directive is applied.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;figure class=&quot;wp-block-table is-style-regular&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;1&lt;\/td&gt;&lt;td&gt;constructor(el: ElementRef)&lt;\/td&gt;&lt;\/tr&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/figure&gt;<\/pre><\/div>\n\n\n\n<p>After injecting ElementRef in our class constructor, we can now access the element here. So, let\u2019s access the element and set its background color to Red.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>123<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">constructor(el: ElementRef) {     el.nativeElement.style.backgroundColor = 'red';  }<\/pre><\/div>\n\n\n\n<p>This is how, we can create our basic directive. But how can we use it on any element?<\/p>\n\n\n\n<p>To apply this directive, we have added&nbsp;<code>appColor<\/code>&nbsp;to &lt;p&gt;&lt;\/p&gt; element.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>1<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>See the complete code of app.component.html file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">app.component.html<\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>12345678<\/td><td>&lt;!&#8211;The content below is only a placeholder and can be replaced.&#8211;&gt;&lt;div style=&#8221;text-align:center&#8221;&gt;&nbsp;&nbsp;&lt;h1&gt;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to {{ title }}!&nbsp;&nbsp;&lt;\/h1&gt; &lt;p appColor&gt;Show me my color&lt;\/p&gt;&lt;router-outlet&gt;&lt;\/router-outlet&gt;&lt;\/div&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Open the browse and see the page.<\/p>\n\n\n\n<p>Here, we can see, our directive changed the red background colour of the text.<\/p>\n\n\n\n<p>So, in this way, we have modified the DOM through our custom directive. We have changed the colour of&nbsp;the <strong>p element&nbsp;<\/strong>through angular attribute directive.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passing value to Custom Directive<\/h3>\n\n\n\n<p>In the above directive, we have hardcoded the color code Red. It would be great, if we can make it dynamic, i.e, our directive can accept any color name from the element and render the background in the same color. In order to make our custom directive dynamic, let\u2019s tweak our code again.<\/p>\n\n\n\n<p>Custom Directives in Angular 7<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>color.directive.ts<\/em><\/h4>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;midnight&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">&lt;figure class=&quot;wp-block-table is-style-regular&quot;&gt;import { Directive, ElementRef, Input, OnInit } from '@angular\/core';&amp;nbsp;@Directive({&amp;nbsp;&amp;nbsp;selector: '[appColor]'})export class ColorDirective implements OnInit {&amp;nbsp;&amp;nbsp;@Input() appColor: string;&amp;nbsp;&amp;nbsp;&amp;nbsp;constructor(private el: ElementRef) { }&amp;nbsp;&amp;nbsp;&amp;nbsp;ngOnInit(){&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;this.el.nativeElement.style.backgroundColor = this.appColor;&amp;nbsp;&amp;nbsp; }}&lt;table class=&quot;&quot;&gt;&lt;tbody&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;\/figure&gt;<\/pre><\/div>\n\n\n\n<p>In the line first, we have further imported&nbsp;<code>OnInit<\/code>&nbsp;from @angular\/core.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>1<\/td><td>import { Directive, ElementRef, Input, OnInit } from &#8216;@angular\/core&#8217;;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>OnInit<\/strong><\/p>\n\n\n\n<p>A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an\u00a0<code>ngOnInit()<\/code>\u00a0method to handle any additional initialization tasks.<\/p>\n<\/blockquote>\n\n\n\n<p>After importing OnInit, we implemented this directive in our class in line 6.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>1<\/td><td>export class ColorDirective implements OnInit<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Let\u2019s create an input property in our directive named same as our directive name.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>1<\/td><td>@Input() appColor: string;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Then implements the&nbsp;<code>ngOnInit()<\/code>&nbsp;method. In this method, we wrote the code of setting the background color of an element to the color, passed through element to our directive.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>123<\/td><td>ngOnInit(){&nbsp;&nbsp;&nbsp;&nbsp;this.el.nativeElement.style.backgroundColor = this.appColor;&nbsp;&nbsp;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Now, let\u2019s see the code in our html template file, how to use this directive now.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">app.component.html<\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>123456789<\/td><td>&lt;!&#8211;The content below is only a placeholder and can be replaced.&#8211;&gt;&lt;div style=&#8221;text-align:center&#8221;&gt;&nbsp;&nbsp;&lt;h1&gt;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to {{ title }}!&nbsp;&nbsp;&lt;\/h1&gt; &lt;p [appColor]= &#8220;&#8216;green'&#8221;&gt;Show me Green Color&lt;\/p&gt; &lt;p [appColor]= &#8220;&#8216;red'&#8221;&gt;Show me Red Color&lt;\/p&gt;&lt;router-outlet&gt;&lt;\/router-outlet&gt;&lt;\/div&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>See these two lines in our template file. We have passed green &amp; red color to &lt;p&gt;&lt;\/p&gt; elements.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>12<\/td><td>&lt;p [appColor]= &#8220;&#8216;green'&#8221;&gt;Show me Green Color&lt;\/p&gt;&lt;p [appColor]= &#8220;&#8216;red'&#8221;&gt;Show me Red Color&lt;\/p&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Note: String values must be passed with single quotes (\u2018) with double quotes (\u201c).<\/p>\n<\/blockquote>\n\n\n\n<p>Now, open the browser and see the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Passing value to Custom Directive by Component Class<\/h3>\n\n\n\n<p>To make our above code more simpler, we can declare two model property in our component class&nbsp;<em>app.component.ts<\/em>&nbsp;file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">app.component.ts<\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>123456789101112<\/td><td>import { Component } from &#8216;@angular\/core&#8217;;&nbsp;@Component({&nbsp;&nbsp;selector: &#8216;app-root&#8217;,&nbsp;&nbsp;templateUrl: &#8216;.\/app.component.html&#8217;,&nbsp;&nbsp;styleUrls: [&#8216;.\/app.component.css&#8217;]})export class AppComponent {&nbsp;&nbsp;title = &#8216;zeptoapp&#8217;;&nbsp;&nbsp;greenColor = &#8216;green&#8217;;&nbsp;&nbsp;redColor = &#8216;red&#8217;;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Now, you can see in line 10 &amp; 11, we have created two model properties:&nbsp;<code>greenColor<\/code>&nbsp;&amp;&nbsp;<code>redColor<\/code>. Then, we passed it to our custom directive through html template file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">app.component.html<\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td>123456789<\/td><td>&lt;!&#8211;The content below is only a placeholder and can be replaced.&#8211;&gt;&lt;div style=&#8221;text-align:center&#8221;&gt;&nbsp;&nbsp;&lt;h1&gt;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to {{ title }}!&nbsp;&nbsp;&lt;\/h1&gt; &lt;p [appColor]= &#8220;greenColor&#8221;&gt;Show me Green Color&lt;\/p&gt; &lt;p [appColor]= &#8220;redColor&#8221;&gt;Show me Red Color&lt;\/p&gt;&lt;router-outlet&gt;&lt;\/router-outlet&gt;&lt;\/div&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>In this way, we can pass custom directive values from the component class as well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Summary<\/h3>\n\n\n\n<p>In this blog, we looked into different kinds of <a href=\"https:\/\/appfinz.com\/blogs\/custom-directives-in-angular-7\/\">Custom Directives in Angular 7.<\/a> And then we have created our custom directive. We also learned about how to pass value from HTML template file, and then from component class as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting started with Angular 7 Directives Custom Directives in Angular 7 are the most powerful<\/p>\n","protected":false},"author":1,"featured_media":338,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[],"class_list":["post-470","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=470"}],"version-history":[{"count":6,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/470\/revisions"}],"predecessor-version":[{"id":1345,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/470\/revisions\/1345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/338"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}