# Getting started with Angular Welcome to Angular! This tutorial introduces you to the essentials of Angular by walking you through building an e-commerce site with a catalog, shopping cart, and check-out form. To help you get started right away, this tutorial uses a ready-made application that you can examine and modify interactively on [Stackblitz](https://stackblitz.com/)—without having to [set up a local work environment](guide/setup-local "Setup guide"). StackBlitz is a browser-based development environment where you can create, save, and share projects using a variety of technologies. ## Prerequisites To get the most out of this tutorial you should already have a basic understanding of the following. * [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") * [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") * [TypeScript](https://www.typescriptlang.org/docs/home.html "TypeScript documentation")

{@a components} ## Take a tour of the example application You build Angular applications with components. Components define areas of responsibility in the UI that let you reuse sets of UI functionality. A component consists of three things: * **A component class** that handles data and functionality. * **An HTML template** that determines the UI. * **Component-specific styles** that define the look and feel. This guide demonstrates building an application with the following components. * ``—the first component to load and the container for the other components. * ``—the store name and checkout button. * ``—the product list. * ``—a component that contains the application's alerts. For more information about components, see [Introduction to Components](guide/architecture-components "Introduction to Components and Templates"). {@a new-project} ## Create the sample project To create the sample project, generate the ready-made sample project in StackBlitz. To save your work: 1. Log into StackBlitz. 1. Fork the project you generated. 1. Save periodically. In StackBlitz, the preview pane on the right shows the starting state of the example application. The preview features two areas: * a top bar with the store name, *My Store*, and a checkout button * a header for a product list, *Products* The project section on the left shows the source files that make up the application, including the infrastructure and configuration files. When you generate the StackBlitz example apps that accompany the tutorials, StackBlitz creates the starter files and mock data for you. The files you use throughout the tutorial are in the `src` folder. For more information on how to use StackBlitz, see the [StackBlitz documentation](https://developer.stackblitz.com/docs/platform/). {@a product-list} ## Create the product list In this section, you'll update the application to display a list of products. You'll use predefined product data from the `products.ts` file and methods from the `product-list.component.ts` file. This section guides you through editing the HTML, also known as the template. 1. In the `product-list` folder, open the template file `product-list.component.html`. 1. Add an `*ngFor` structural directive on a `

`, as follows. With `*ngFor`, the `

` repeats for each product in the list. Structural directives shape or reshape the DOM's structure, by adding, removing, and manipulating elements. For more information about structural directives, see [Structural directives](guide/structural-directives). 1. Inside the `

`, add an `

` and `{{ product.name }}`. The `{{ product.name }}` statement is an example of Angular's interpolation syntax. Interpolation `{{ }}` lets you render the property value as text. The preview pane updates to display the name of each product in the list.

1. To make each product name a link to product details, add the `` element around `{{ product.name }}`. 1. Set the title to be the product's name by using the property binding `[ ]` syntax, as follows: In the preview pane, hover over a product name to see the bound name property value, which is the product name plus the word "details". Property binding `[ ]` lets you use the property value in a template expression.

1. Add the product descriptions. On a `
` element, use an `*ngIf` directive so that Angular only creates the `
` element if the current product has a description. The application now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Angular doesn't create the `
` element because the product's description property is empty.

1. Add a button so users can share a product. Bind the button's `click` event to the `share()` method in `product-list.component.ts`. Event binding uses a set of parentheses, `( )`, around the event, as in the `(click)` event on the `