{"id":571,"date":"2023-05-14T12:02:06","date_gmt":"2023-05-14T12:02:06","guid":{"rendered":"https:\/\/sitegator.in\/?p=571"},"modified":"2023-05-14T12:03:55","modified_gmt":"2023-05-14T12:03:55","slug":"directives-in-angular","status":"publish","type":"post","link":"https:\/\/sitegator.in\/cms\/directives-in-angular\/","title":{"rendered":"Directives in angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Steps to create directive<\/h1>\n\n\n\n

<\/a>Step 1 create an angular application with command<\/h1>\n\n\n\n

ng new directiveApp<\/p>\n\n\n\n

<\/a>Step 2 create an directive with command<\/h1>\n\n\n\n

ng generate directive directiveName<\/p>\n\n\n\n

<\/a>Step 3 copy and paste the code given in above directive.ts file.<\/h1>\n\n\n\n

directive.ts<\/h2>\n\n\n\n
import { Directive,ElementRef,Input,HostListener } from '@angular\/core';\r\n@Directive({\r\n  selector: '[appDirectives]'\r\n})\r\n\r\nexport class DirectivesDirective {\r\n\r\n  inputElement: ElementRef;\r\n\r\n  @Input('appDirectives')\r\n  appDirectives!: string;\r\n  arabicRegex = '[\\u0600-\\u06FF]';\r\n\r\n  constructor(el: ElementRef) {\r\n    this.inputElement = el;\r\n  }\r\n\r\n  @HostListener('keypress', ['$event']) onKeyPress(event: any) {\r\n    this.notAllowSpaceatFirst(event)\r\n  }\r\n\r\n  integerOnly(event: any) {\r\n    const e = <KeyboardEvent>event;\r\n    if (e.key === 'Tab' || e.key === 'TAB') {\r\n      return;\r\n    }\r\n    if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].indexOf(e.key) === -1) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  noSpecialChars(event: any) {\r\n    const e = <KeyboardEvent>event;\r\n    if (e.key === 'Tab' || e.key === 'TAB') {\r\n      return;\r\n    }\r\n    let k;\r\n    k = event.keyCode;  \/\/ k = event.charCode;  (Both can be used)\r\n    if ((k > 64 && k < 91) || (k > 96 && k < 123) || k === 8 || k === 32 || (k >= 48 && k <= 57)) {\r\n      return;\r\n    }\r\n    const ch = String.fromCharCode(e.keyCode);\r\n    const regEx = new RegExp(this.arabicRegex);\r\n    if (regEx.test(ch)) {\r\n      return;\r\n    }\r\n    e.preventDefault();\r\n  }\r\n\r\n  onlyChars(event: any) {\r\n    const e = <KeyboardEvent>event;\r\n    if (e.key === 'Tab' || e.key === 'TAB') {\r\n      return;\r\n    }\r\n    let k;\r\n    k = event.keyCode;  \/\/ k = event.charCode;  (Both can be used)\r\n    if ((k > 64 && k < 91) || k === 8 || k === 32 || (k > 96 && k < 124)) {\r\n      return;\r\n    }\r\n    e.preventDefault();\r\n  }\r\n\r\n  allowDecimal(event: any) {\r\n    const e = <KeyboardEvent>event;\r\n\r\n    if (e.key === 'Tab' || e.key === 'TAB') {\r\n      return;\r\n    }\r\n\r\n    let k;\r\n\r\n    k = event.keyCode;  \/\/ k = event.charCode;  (Both can be used)\r\n\r\n    if ((k == 48) || (k == 49) || (k == 50) || (k == 51) ||\r\n      (k == 52) || (k == 53) || (k == 54) || (k == 55) ||\r\n      (k == 56) || (k == 57)) {\r\n      var arcontrol = new Array();\r\n      var temp = this.inputElement.nativeElement.value;\r\n      arcontrol = this.inputElement.nativeElement.value.split(\".\");\r\n\r\n      if (arcontrol.length == 1) {\r\n        if (arcontrol[0].length < 16) {\r\n          return;\r\n        }\r\n        else {\r\n        }\r\n      }\r\n      else {\r\n        return;\r\n      }\r\n    }\r\n    else if (k == 46) {\r\n      var sCount = new Array();\r\n      sCount = this.inputElement.nativeElement.value.split(\".\");\r\n\r\n      if ((sCount.length) - 1 == 1) {\r\n      }\r\n      else {\r\n        return;\r\n      }\r\n    }\r\n\r\n    e.preventDefault();\r\n  }\r\n  notAllowSpaceatFirst(event: any) {\r\n    if (event.target.selectionStart === 0 && event.code === \"Space\") {\r\n      event.preventDefault();\r\n    }\r\n    else {\r\n      if (this.appDirectives === 'integer') {\r\n        this.integerOnly(event);\r\n      } else if (this.appDirectives === 'noSpecialChars') {\r\n        this.noSpecialChars(event);\r\n      }\r\n      else if (this.appDirectives === 'onlyChars') {\r\n        this.onlyChars(event);        \r\n      }\r\n      else if (this.appDirectives === 'allowDecimal') {\r\n        this.allowDecimal(event);\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n<\/code><\/pre>\n\n\n\n
Component.ts<\/h2>\n\n\n\n
<h1>Directives:<\/h1>\r\n\r\n<div>\r\n  <p>Space At Start Not Allowed<\/p>\r\n  <input appDirectives=\"\" type=\"test\" placeholder=\"Enter text\">\r\n<\/div>\r\n\r\n<div>\r\n  <p>Integers Only<\/p>\r\n  <input appDirectives=\"integer\" type=\"test\" placeholder=\"Enter text\">\r\n<\/div>\r\n\r\n<div>\r\n  <p>Characters Only<\/p>\r\n  <input appDirectives=\"onlyChars\" type=\"test\" placeholder=\"Enter text\">\r\n<\/div>\r\n\r\n<div>\r\n  <p>Special Characters Not Allowed<\/p>\r\n  <input appDirectives=\"noSpecialChars\" type=\"test\" placeholder=\"Enter text\">\r\n<\/div>\r\n\r\n<div>\r\n  <p>Allow Decimal<\/p>\r\n  <input appDirectives=\"allowDecimal\" type=\"test\" placeholder=\"Enter text\">\r\n<\/div><\/code><\/pre>\n\n\n\n
Find source code on github<\/h2>\n\n\n\nhttps:\/\/github.com\/pratik-maurya\/Directives\/tree\/master\n","protected":false},"excerpt":{"rendered":"
Steps to create directive Step 1 create an angular application with command ng new directiveApp Step 2 create an directive with command ng generate directive directiveName Step 3 copy and paste the code given in above directive.ts file. directive.ts Component.ts Find source code on github https:\/\/github.com\/pratik-maurya\/Directives\/tree\/master<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-571","post","type-post","status-publish","format-standard","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/comments?post=571"}],"version-history":[{"count":2,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/571\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/571\/revisions\/575"}],"wp:attachment":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media?parent=571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/categories?post=571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/tags?post=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}