block includes
  include _util-fns

:marked
  Angular applications are made up of _components_.
    A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:

+makeExample('src/app/app.component.ts')(format='.')

block qs-src-online-and-local
  .l-sub-section
    :marked
      Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
      Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
      and prepare for development of a real Angular application.

:marked
  Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
  <span if-docs="ts">function</span> that
  <span if-docs="ts">takes a _metadata_ object. The metadata object</span> describes how the HTML template and component class work together.

  The `selector` property tells Angular to display the component inside a custom `<my-app>` tag in the `index.html`.
+makeExample('src/index.html','my-app','index.html (inside <body>)')(format='.')
:marked
  The `template` property defines a message inside an `<h1>` header.
  The message starts with "Hello" and ends with `{{name}}`,
  which is an Angular [interpolation binding](guide/displaying-data.html) expression.
  At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
  Interpolation binding is one of many Angular features you'll discover in this documentation.

+ifDocsFor('ts')
  :marked
    In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens.

  .callout.is-helpful
    header A word about TypeScript
    p.
      This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
      uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; <a href="cookbook/ts-to-js.html">this guide</a> explains how.

.l-sub-section
    :marked
        ### Next step

        Start [**learning Angular**](guide/learning-angular.html "Learning Angular").