<commit_before>include ../../../../_includes/_util-fns

:marked
  Everything that we can do in Angular 2 in TypeScript, we can also do
  in JavaScript. Translating from one language to the other is mostly a
  matter of changing the way we organize our code and the way we access
  Angular 2 APIs.

  Since TypeScript is a popular language option in Angular 2, many of the
  code examples you see on the Internet as well as on this site are written
  in TypeScript. This cookbook contains recipes for translating these kinds of
  code examples to ES5, so that they can be applied to Angular 2 JavaScript
  applications.

<a id="toc"></a>
:marked
  ## Table of contents

  [Modularity: imports and exports](#modularity)

  [Classes and Class Metadata](#class-metadata)
  
  [Input and Output Metadata](#property-metadata)
  
  [Dependency Injection](#dependency-injection)
  
  [Host and Query Metadata](#other-property-metadata)

  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
  code shown in this cookbook.**

a(id="modularity")
.l-main-section
:marked
  ## Importing and Exporting

- var top="vertical-align:top"
table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th TypeScript
    th ES5 JavaScript
  tr(style=top)
    td
      :marked
        ### Importing Angular 2 Code

        In TypeScript code, Angular 2 classes, functions, and other members
        are imported with TypeScript `import` statements:

      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )

    td
      :marked
        ### Accessing Angular 2 Code through the ng global

        In JavaScript code, when using
        [the Angular 2 packages](../glossary.html#!#scoped-package),
        we can access Angular code through the global `ng` object. In the
        nested members of this object we'll find everything we would import
        from `angular2` in TypeScript:

      +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." )

  tr(style=top)
    td
      :marked
        ### Importing and Exporting Application Code

        Each file in an Angular 2 TypeScript application constitutes a
        TypeScript module. When we want to make something from a module available
        to other modules, we `export` it.

      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." )

      :marked
        In other modules we can then `import` things that have been exported
        elsewhere.

      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )

    td
      :marked<commit_msg>docs(ts-to-js): change angular2 to @angular (#2403)<commit_after>include ../../../../_includes/_util-fns

:marked
  Everything that we can do in Angular 2 in TypeScript, we can also do
  in JavaScript. Translating from one language to the other is mostly a
  matter of changing the way we organize our code and the way we access
  Angular 2 APIs.

  Since TypeScript is a popular language option in Angular 2, many of the
  code examples you see on the Internet as well as on this site are written
  in TypeScript. This cookbook contains recipes for translating these kinds of
  code examples to ES5, so that they can be applied to Angular 2 JavaScript
  applications.

<a id="toc"></a>
:marked
  ## Table of contents

  [Modularity: imports and exports](#modularity)

  [Classes and Class Metadata](#class-metadata)
  
  [Input and Output Metadata](#property-metadata)
  
  [Dependency Injection](#dependency-injection)
  
  [Host and Query Metadata](#other-property-metadata)

  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
  code shown in this cookbook.**

a(id="modularity")
.l-main-section
:marked
  ## Importing and Exporting

- var top="vertical-align:top"
table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th TypeScript
    th ES5 JavaScript
  tr(style=top)
    td
      :marked
        ### Importing Angular 2 Code

        In TypeScript code, Angular 2 classes, functions, and other members
        are imported with TypeScript `import` statements:

      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )

    td
      :marked
        ### Accessing Angular 2 Code through the ng global

        In JavaScript code, when using
        [the Angular 2 packages](../glossary.html#!#scoped-package),
        we can access Angular code through the global `ng` object. In the
        nested members of this object we'll find everything we would import
        from `@angular` in TypeScript:

      +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." )

  tr(style=top)
    td
      :marked
        ### Importing and Exporting Application Code

        Each file in an Angular 2 TypeScript application constitutes a
        TypeScript module. When we want to make something from a module available
        to other modules, we `export` it.

      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." )

      :marked
        In other modules we can then `import` things that have been exported
        elsewhere.

      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )

    td
      :marked
{'fraction_non_alphanumeric': 0.1047335072679836, 'fraction_numerical': 0.008572493477450614, 'mean_word_length': 3.096946564885496, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2225450', 'n_tokens_mistral': 1655, 'n_tokens_neox': 1528, 'n_words': 576}