@component decorator provides additional metadata that determines how to process, instantiate and use the component at runtime (the decorators in Typescript are like annotations in Java or attributes in C #)

component Decorator accepts the required configuration object that requires information to create and display the component in real time.

@Component({ 
  changeDetection?: ChangeDetectionStrategy
  viewProviders?: Provider[]
  moduleId?: string
  templateUrl?: string
  template?: string
  styleUrls?: string[]
  styles?: string[]
  animations?: any[]
  encapsulation?: ViewEncapsulation
  interpolation?: [string, string]
  entryComponents?: Array<Type<any> | any[]>
  preserveWhitespaces?: boolean
  // inherited from core/Directive
  selector?: string
  inputs?: string[]
  outputs?: string[]
  providers?: Provider[]
  exportAs?: string
  queries?: {...}
  host?: {...}
  jit?: boolean
})

Metadata Properties:

• changeDetection - change the detection strategy used by this component.
• viewProviders - list of providers available for this component and the view of their children.
• moduleId - Module ID ES / CommonJS of the file in which this component is defined.
• templateUrl - url in an external file that contains a template for the view.
• template - template defined inline template for the view.
• styleUrls - url list for style sheets that will be applied to the view of this component.
• styles - styles defined online that will be applied to the view of this component.
• animations - animation’s list of this component.
• encapsulation - strategy of style encapsulation used by this component.
• interpolation - custom interpolation markers used in the template of this component.
• entryComponents - entryComponents is the list of components that are dynamically inserted into the view of this component.
• preserveWhitespaces - Using this property, we can remove all whitespaces from the template.

// inherited from core/Directive

• selector - css selector which identifies this component in a template.
• inputs - it is property within one component (child component) to receive a value from another component (parent component).
• outputs - it is property of a component to send data from one component (child component) to calling component (parent component).
• providers - Providers are usually singleton objects (an instance), to which other objects have access through dependency injection (DI).
• exportAs - name under which the component instance is exported to a template.
• queries - allows you to configure queries that can be inserted into the component.
• host - Map of class properties to host element links for events, properties, and attributes.
• jit - if true, the AOT compiler will ignore this directive/component and will therefore always be compiled using JIT.

These are the properties which are combined with the @Component class. Let's see what they tell one by one in next chapter.