{"id":188,"date":"2021-01-22T11:45:29","date_gmt":"2021-01-22T11:45:29","guid":{"rendered":"http:\/\/santosh-shah.com\/?p=188"},"modified":"2021-02-15T06:02:26","modified_gmt":"2021-02-15T06:02:26","slug":"decorators-available-in-angular","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/","title":{"rendered":"@Decorators available in Angular"},"content":{"rendered":"\n

@Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. Here is a list of @Decorators available in Angular.<\/p>\n\n\n\n

  1. @NgModule<\/li>
  2. @Component<\/li>
  3. @Injectable<\/li>
  4. @Directive<\/li>
  5. @Pipe<\/li>
  6. @Input<\/li>
  7. @Output<\/li>
  8. @HostBinding<\/li>
  9. @HostListener<\/li>
  10. @ContentChild<\/li>
  11. @ContentChildren<\/li>
  12. @ViewChild<\/li>
  13. @ViewChildren<\/li><\/ol>\n\n\n\n
    1. @NgModule:
      @NgModule decorator is very common in angular. It can be seen in every module.ts<\/code> file. The @NgModule decorator contains component declaration, module imports, module and component exports, providers and bootstrap.<\/li><\/ol>\n\n\n\n
      import { NgModule } from '@angular\/core';\n@NgModule({\n    declarations:[Component1, Component2],\n    imports: [Module1, Module2],\n    exports: [MyModule],\n    providers: [Service1, Service2],\n    bootstrap: [AppComponent]})\nclass MyModule {}<\/code><\/pre>\n\n\n\n
      2. @Component:
      @Component decorate declares that a class is a component and provides metadata about the component.<\/p>\n\n\n\n
      import { Component } from '@angular\/core';\n@Component({\n       changeDetection?: ChangeDetectionStrategy\n       viewProviders?: Provider[]\n       moduleId?: string\n       templateUrl?: string\n       template?: string\n       styleUrls?: string[]\n       styles?: string[]\n       animations?: any[]\n       encapsulation?: ViewEncapsulation\n       interpolation?: [string, string]\n       entryComponents?: Array<Type<any> | any[]>\n       preserveWhitespaces?: boolean\n\n       \/\/ inherited from core\/Directive\n       selector?: string\n       inputs?: string[]\n       outputs?: string[]\n       host?: {...}\n       providers?: Provider[]\n       exportAs?: string\n       queries?: {...}\n})\n\nclass ComponentName {\n   constructor(){\n   }\n}<\/code><\/pre>\n\n\n\n
      3. @Injectable:
          @Injectable decorator declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. In order to use this decorator we need to import import { Injectable } from '@angular\/core'<\/code>
      @Injectable()<\/code> <\/p>\n\n\n\n
      4. @Directive:
          @Directive decorator declares that a class is a directive and provides metadata about the directive.<\/p>\n\n\n\n
      import { Directive } from \u2018@angular\/core\u2019;\n@Directive({\n     selector?: string\n     inputs?: string[]\n     outputs?: string[]\n     host?: {\u2026}\n     providers?: Provider[]\n     exportAs?: string\n     queries?: {\u2026}\n})<\/code><\/pre>\n\n\n\n
      5. @Pipe
          @Pipe decorator declares that a class is a pipe and provides metadata about the pipe to the ts file.<\/p>\n\n\n\n
      import { Pipe } from \u2018@angular\/core\u2019;\n@Pipe({\n    name: string\n    pure?: boolean\n})<\/code><\/pre>\n\n\n\n
      6. @Input
          @Input decorator declares an input property that you can update via property binding. It is used widely in angular for data sharing between two component with a relation of parent to child.<\/p>\n\n\n\n
      7. @OutPut
          @OutPut decorator declares an output property that fires events that you can subscribe to with an event binding. It is widely use in angular when you want to share data from child component to parent component.<\/p>\n\n\n\n
      <child-component (myEvent)=\"doSomething()\"><\/code><\/p>\n\n\n\n
      import { Output } from \u2018@angular\/core\u2019;\n@Output({\n    bindingPropertyName?: string\n})<\/code><\/pre>\n\n\n\n
      8. @HostBinding
          @HostBinding binds a host element property to a directive\/component property.
      <\/p>\n\n\n\n
      import { HostBinding } from \u2018@angular\/core\u2019;\n@HostBinding({\n     hostPropertyName?: string\n})<\/code><\/pre>\n\n\n\n
         9. @HostListener
             @HostListener decorator subscribes to a host element event (click)<\/code> with a directive\/compoenent method (onClick<\/code>), optionally passing an argument ($event<\/code>).
      <\/p>\n\n\n\n
      import { HostListener } from \u2018@angular\/core\u2019;\n@HostListener({\n     eventName?: string\n     args?: string[]\n})<\/code><\/pre>\n\n\n\n
      10. @ContentChild
            @ContentChild decorator binds the first result of the component content query (myPredicate<\/code>) to a property (myChildComponent<\/code>) of the class.<\/p>\n\n\n\n
      import { ContentChild } from \u2018@angular\/core\u2019;\n@ContentChild(Pane) pane: Pane;<\/code><\/pre>\n\n\n\n
      11. @ContentChildren
             @ContentChildren binds the results of the compoenent content query (myPredicate<\/code>) to a property (myChildComponent<\/code>) of the class.<\/p>\n\n\n\n
      import { ContentChildren } from \u2018@angular\/core\u2019;\n@ContentChildren(Pane) topLevelPanes: QueryList<Pane>;<\/code><\/pre>\n\n\n\n
      12. @ViewChild
            @ViewChild decorator binds the first result of the component view query to a property of the class. Not available for directives.<\/p>\n\n\n\n
      import { ViewChild } from '@angular\/core';\n@ViewChild(Pane)<\/code><\/pre>\n\n\n\n
       12. @ViewChildren
             @ViewChildren binds the results of the components view query to a property of the calss. Not available for directives.
      <\/p>\n\n\n\n
      import { ViewChildren } from \u2018@angular\/core\u2019;\n@ViewChildren(Pane) panes: QueryList<Pane>;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      @Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. Here is a list of @Decorators available in Angular. @NgModule @Component @Injectable @Directive @Pipe @Input @Output @HostBinding @HostListener @ContentChild @ContentChildren @ViewChild @ViewChildren @NgModule:@NgModule decorator is very common in angular. It can be seen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-188","post","type-post","status-publish","format-standard","hentry","category-angular"],"yoast_head":"\n@Decorators available in Angular - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"@Decorators available in Angular - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"@Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. Here is a list of @Decorators available in Angular. @NgModule @Component @Injectable @Directive @Pipe @Input @Output @HostBinding @HostListener @ContentChild @ContentChildren @ViewChild @ViewChildren @NgModule:@NgModule decorator is very common in angular. It can be seen […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-22T11:45:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-15T06:02:26+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/\",\"name\":\"@Decorators available in Angular - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2021-01-22T11:45:29+00:00\",\"dateModified\":\"2021-02-15T06:02:26+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"@Decorators available in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"@Decorators available in Angular - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"@Decorators available in Angular - Santosh Kumar Shah","og_description":"@Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. Here is a list of @Decorators available in Angular. @NgModule @Component @Injectable @Directive @Pipe @Input @Output @HostBinding @HostListener @ContentChild @ContentChildren @ViewChild @ViewChildren @NgModule:@NgModule decorator is very common in angular. It can be seen […]","og_url":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2021-01-22T11:45:29+00:00","article_modified_time":"2021-02-15T06:02:26+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/","url":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/","name":"@Decorators available in Angular - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2021-01-22T11:45:29+00:00","dateModified":"2021-02-15T06:02:26+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/decorators-available-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"@Decorators available in Angular"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":1,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/188\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}