{ "id": "start", "title": "Getting started with Angular", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Getting started with Angularlink

\n

Welcome to Angular!

\n

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.

\n

To help you get started right away, this tutorial uses a ready-made application that you can examine and modify interactively on Stackblitz—without having to set up a local work environment.\nStackBlitz is a browser-based development environment where you can create, save, and share projects using a variety of technologies.

\n

Prerequisiteslink

\n

To get the most out of this tutorial you should already have a basic understanding of the following.

\n\n\n

Take a tour of the example applicationlink

\n

You build Angular applications with components.\nComponents define areas of responsibility in the UI that let you reuse sets of UI functionality.

\n

A component consists of three things:

\n\n

This guide demonstrates building an application with the following components.

\n\n
\n \"Online\n
\n

For more information about components, see Introduction to Components.

\n\n

Create the sample projectlink

\n

To create the sample project, generate the ready-made sample project in StackBlitz.\nTo save your work:

\n
    \n
  1. Log into StackBlitz.
    2. \n
  2. Fork the project you generated.
    3. \n
  3. Save periodically.
    4. \n
\n

In StackBlitz, the preview pane on the right shows the starting state of the example application.\nThe preview features two areas:

\n\n
\n \"Starter\n
\n

The project section on the left shows the source files that make up the application, including the infrastructure and configuration files.

\n

When you generate the StackBlitz example apps that accompany the tutorials, StackBlitz creates the starter files and mock data for you.\nThe files you use throughout the tutorial are in the src folder.

\n

For more information on how to use StackBlitz, see the StackBlitz documentation.

\n\n

Create the product listlink

\n

In this section, you'll update the application to display a list of products.\nYou'll use predefined product data from the products.ts file and methods from the product-list.component.ts file.\nThis section guides you through editing the HTML, also known as the template.

\n
    \n
  1. \n

    In the product-list folder, open the template file product-list.component.html.

    \n
    2. \n
  2. \n

    Add an *ngFor structural directive on a <div>, as follows.

    \n\n<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n</div>\n\n\n

    With *ngFor, the <div> repeats for each product in the list.

    \n

    Structural directives shape or reshape the DOM's structure, by adding, removing, and manipulating elements.\nFor more information about structural directives, see Structural directives.

    \n
    3. \n
  3. \n

    Inside the <div>, add an <h3> and {{ product.name }}.\nThe {{ product.name }} statement is an example of Angular's interpolation syntax.\nInterpolation {{ }} lets you render the property value as text.

    \n \n<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n\n <h3>\n {{ product.name }}\n </h3>\n\n</div>\n\n\n

    The preview pane updates to display the name of each product in the list.

    \n
    \n \"Product\n
    \n
    4. \n
  4. \n

    To make each product name a link to product details, add the <a> element around {{ product.name }}.

    \n
    5. \n
  5. \n

    Set the title to be the product's name by using the property binding [ ] syntax, as follows:

    \n\n<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\">\n {{ product.name }}\n </a>\n </h3>\n\n</div>\n\n\n\n

    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\".\nProperty binding [ ] lets you use the property value in a template expression.

    \n
    \n \"Product\n
    \n
    6. \n
  6. \n

    Add the product descriptions. On a <p> element, use an *ngIf directive so that Angular only creates the <p> element if the current product has a description.

    \n\n<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\">\n {{ product.name }}\n </a>\n </h3>\n\n <p *ngIf=\"product.description\">\n Description: {{ product.description }}\n </p>\n\n</div>\n\n\n\n

    The application now displays the name and description of each product in the list.\nNotice that the final product does not have a description paragraph.\nAngular doesn't create the <p> element because the product's description property is empty.

    \n
    \n \"Product\n
    \n
    7. \n
  7. \n

    Add a button so users can share a product.\nBind 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 <button> element.

    \n \n<h2>Products</h2>\n\n<div *ngFor=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\">\n {{ product.name }}\n </a>\n </h3>\n\n <p *ngIf=\"product.description\">\n Description: {{ product.description }}\n </p>\n\n <button (click)=\"share()\">\n Share\n </button>\n\n</div>\n\n\n\n

    Each product now has a Share button.

    \n
    \n \"Share\n
    \n

    Clicking the Share button triggers an alert that states, \"The product has been shared!\".

    \n
    \n \"Alert\n
    \n
    8. \n
\n

In editing the template, you have explored some of the most popular features of Angular templates.\nFor more information, see Introduction to components and templates.

\n\n

Pass data to a child componentlink

\n

Currently, the product list displays the name and description of each product.\nThe ProductListComponent also defines a products property that contains imported data for each product from the products array in products.ts.

\n

The next step is to create a new alert feature that uses product data from the ProductListComponent.\nThe alert checks the product's price, and, if the price is greater than $700, displays a Notify Me button that lets users sign up for notifications when the product goes on sale.

\n

This section walks you through creating a child component, ProductAlertsComponent that can receive data from its parent component, ProductListComponent.

\n
    \n
  1. \n

    Right click on the app folder and use the Angular Generator to generate a new component named product-alerts.

    \n
    \n \"StackBlitz\n
    \n

    The generator creates starter files for the three parts of the component:

    \n
      \n
    • product-alerts.component.ts
      • \n
    • product-alerts.component.html
      • \n
    • product-alerts.component.css
      • \n
    \n
    2. \n
  2. \n

    Open product-alerts.component.ts.\nThe @Component() decorator indicates that the following class is a component.\n@Component() also provides metadata about the component, including its selector, templates, and styles.

    \n\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-product-alerts',\n templateUrl: './product-alerts.component.html',\n styleUrls: ['./product-alerts.component.css']\n})\nexport class ProductAlertsComponent implements OnInit {\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n\n\n\n

    Key features in the @Component() are as follows:

    \n
      \n
    • The selector, app-product-alerts, identifies the component.\nBy convention, Angular component selectors begin with the prefix app-, followed by the component name.
      • \n
    • The template and style filenames reference the component's HTML and CSS.
      • \n
    • The @Component() definition also exports the class, ProductAlertsComponent, which handles functionality for the component.
      • \n
    \n
    3. \n
  3. \n

    To set up ProductAlertsComponent to receive product data, first import Input from @angular/core.

    \n\nimport { Component, OnInit } from '@angular/core';\nimport { Input } from '@angular/core';\n\n\n
    4. \n
  4. \n

    In the ProductAlertsComponent class definition, define a property named product with an @Input() decorator.\nThe @Input() decorator indicates that the property value passes in from the component's parent, ProductListComponent.

    \n\nexport class ProductAlertsComponent implements OnInit {\n @Input() product;\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n\n\n\n
    5. \n
  5. \n

    Open product-alerts.component.html and replace the placeholder paragraph with a Notify Me button that appears if the product price is over $700.

    \n\n<p *ngIf=\"product.price > 700\">\n <button>Notify Me</button>\n</p>\n\n\n\n
    6. \n
  6. \n

    To display ProductAlertsComponent as a child of ProductListComponent, add the selector, <app-product-alerts> to product-list.component.html.\nPass the current product as input to the component using property binding.

    \n\n<button (click)=\"share()\">\n Share\n</button>\n\n<app-product-alerts\n [product]=\"product\">\n</app-product-alerts>\n\n\n
    7. \n
\n

The new product alert component takes a product as input from the product list.\nWith that input, it shows or hides the Notify Me button, based on the price of the product.\nThe Phone XL price is over $700, so the Notify Me button appears on that product.

\n
\n \"Product\n
\n\n

Pass data to a parent componentlink

\n

To make the Notify Me button work, the child component needs to notify and pass the data to the parent component.\nThe ProductAlertsComponent needs to emit an event when the user clicks Notify Me and the ProductListComponent needs to respond to the event.

\n
    \n
  1. \n

    In product-alerts.component.ts, import Output and EventEmitter from @angular/core.

    \n\nimport { Component } from '@angular/core';\nimport { Input } from '@angular/core';\nimport { Output, EventEmitter } from '@angular/core';\n\n\n
    2. \n
  2. \n

    In the component class, define a property named notify with an @Output() decorator and an instance of EventEmitter().\nConfiguring ProductAlertsComponent with an @Output() allows the ProductAlertsComponent to emit an event when the value of the notify property changes.

    \n\nexport class ProductAlertsComponent {\n @Input() product;\n @Output() notify = new EventEmitter();\n}\n\n\n\n
    \n

    In new components, the Angular Generator includes an empty constructor(), the OnInit interface, and the ngOnInit() method.\nSince these steps don't use them, the following code example omits them for brevity.

    \n
    \n
    3. \n
  3. \n

    In product-alerts.component.html, update the Notify Me button with an event binding to call the notify.emit() method.

    \n\n<p *ngIf=\"product.price > 700\">\n <button (click)=\"notify.emit()\">Notify Me</button>\n</p>\n\n\n\n
    4. \n
  4. \n

    Define the behavior that happens when the user clicks the button.\nThe parent, ProductListComponent—not the ProductAlertsComponent—acts when the child raises the event.\nIn product-list.component.ts, define an onNotify() method, similar to the share() method.

    \n\nexport class ProductListComponent {\n products = products;\n\n share() {\n window.alert('The product has been shared!');\n }\n\n onNotify() {\n window.alert('You will be notified when the product goes on sale');\n }\n}\n\n\n\n
    5. \n
  5. \n

    Update the ProductListComponent to receive data from the ProductAlertsComponent.

    \n

    In product-list.component.html, bind <app-product-alerts> to the onNotify() method of the product list component.\n<app-product-alerts> is what displays the Notify Me button.

    \n

    \n<button (click)=\"share()\">\n Share\n</button>\n\n<app-product-alerts\n [product]=\"product\" \n (notify)=\"onNotify()\">\n</app-product-alerts>\n\n

    \n
    6. \n
  6. \n

    Click the Notify Me button to trigger an alert which reads, \"You will be notified when the product goes on sale\".

    \n
    \n \"Product\n
    \n
    7. \n
\n

For more information on communication between components, see Component Interaction.

\n\n

What's nextlink

\n

In this section, you've created an application that iterates through data and features components that communicate with each other.

\n

To continue exploring Angular and developing this application:

\n\n\n \n
\n\n\n" }