{"id":4354,"date":"2021-06-15T15:51:55","date_gmt":"2021-06-15T15:51:55","guid":{"rendered":"https:\/\/codethataint.com\/blog\/?p=4354"},"modified":"2021-06-16T03:02:32","modified_gmt":"2021-06-16T03:02:32","slug":"custom-attribute-directive-and-structural-directive","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/custom-attribute-directive-and-structural-directive\/","title":{"rendered":"Custom Attribute Directive and Structural Directive"},"content":{"rendered":"

Custom Attribute Directive<\/strong><\/p>\n

    \n
  1. Below is a Custom Attribute Directive which applies Background color to HTML Elements<\/li>\n
  2. However we could not apply anylogic based on which directive would apply like checking row is even or odd<\/li>\n
  3. Entry should be made in app.modules.ts for new directives created so it would be available<\/li>\n<\/ol>\n

    EvenrowHighlighterDirective.ts <\/strong><\/p>\n

    \r\nimport {AfterViewInit, Directive, ElementRef, OnInit} from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appevenrow]'\r\n})\r\nexport class EvenrowHighlighterDirective implements  OnInit, AfterViewInit{\r\n  constructor(public elementRef: ElementRef) {\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.elementRef.nativeElement.style.backgroundColor = 'gray';\r\n  }\r\n\r\n  ngAfterViewInit(){\r\n    \/\/Add the above code here if ng-content and @child-content is used\r\n  }\r\n}\r\n<\/pre>\n
    Custom Structural Directive<\/strong><\/p>\n
      \n
    1. In below code we replace the functionality of ngIf using custom structural directive which checks for condition based on value set in isPresent<\/li>\n
    2. Similar to ElementRef, TemplateRef gives access to template<\/li>\n
    3. ViewContainer is a reference to the place where the Custom Structural Directive is placed<\/li>\n
    4. One of the key thing while using structural directive is selector, @Input should have the same name<\/em>. This reason behind this is due to the fact that *ngIf would be convered to ng-template before rendering.ng-template works on refernce basis within html. So when reference and directive name are different it would end up in error<\/li>\n<\/ol>\n
      test.component.ts<\/strong><\/p>\n
      \r\nimport {Directive, Input, TemplateRef,  ViewContainerRef} from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appDounless]'\r\n})\r\nexport class DounlessDirective {\r\n\r\n  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) { }\r\n\r\n  @Input() set appDounless(condition: boolean){\r\n    if(condition) {\r\n      this.vcRef.createEmbeddedView(this.templateRef);\r\n    }else{\r\n      this.vcRef.clear();\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
      test.component.ts<\/strong><\/p>\n
      \r\n@Component({\r\n  selector: 'app-test',\r\n  templateUrl: '.\/test.component.html',\r\n  styleUrls: ['.\/test.component.css']\r\n})\r\n\r\nexport class testComponent implements OnInit {\r\n\r\n  public isPresent = true;\r\n\r\n  ngOnInit() {\r\n  }\r\n}\r\n<\/pre>\n
      test.component.html<\/strong><\/p>\n
      \r\n<p appevenrow> This is Custom Attribute Directive<\/p>\r\n<p *appDounless="isPresent">This is Custom Structural Directive<\/p>\r\n<\/pre>\n
      Output<\/strong>
      \n\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
      Custom Attribute Directive Below is a Custom Attribute Directive which applies Background color to HTML Elements However we could not apply anylogic based on which directive would apply like checking row is even or odd Entry should be made in app.modules.ts for new directives created so it would be available EvenrowHighlighterDirective.ts import {AfterViewInit, Directive, ElementRef,… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[300],"tags":[],"class_list":["post-4354","post","type-post","status-publish","format-standard","hentry","category-directives"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=4354"}],"version-history":[{"count":5,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4354\/revisions"}],"predecessor-version":[{"id":4371,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4354\/revisions\/4371"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=4354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=4354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=4354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}