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 **QuickStart example on Plunker** 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') function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together. The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`. +makeExample('src/index.html','my-app','index.html (inside )')(format='.') :marked The `template` property defines a message inside an `

` 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 TypeScript, 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; this guide explains how. .l-sub-section :marked ### Next step Start [**learning Angular**](guide/learning-angular.html "Learning Angular").