5 lines
26 KiB
JSON
5 lines
26 KiB
JSON
{
|
|
"id": "start",
|
|
"title": "Getting started with Angular",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"getting-started-with-angular\">Getting started with Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#getting-started-with-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>Welcome to Angular!</p>\n<p>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.</p>\n<p>To help you get started right away, this tutorial uses a ready-made application that you can examine and modify interactively on <a href=\"https://stackblitz.com/\">Stackblitz</a>—without having to <a href=\"guide/setup-local\" title=\"Setup guide\">set up a local work environment</a>.\nStackBlitz is a browser-based development environment where you can create, save, and share projects using a variety of technologies.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To get the most out of this tutorial you should already have a basic understanding of the following.</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML\" title=\"Learning HTML: Guides and tutorials\">HTML</a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" title=\"JavaScript\">JavaScript</a></li>\n<li><a href=\"https://www.typescriptlang.org/\" title=\"The TypeScript language\">TypeScript</a></li>\n</ul>\n<a id=\"components\"></a>\n<h2 id=\"take-a-tour-of-the-example-application\">Take a tour of the example application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#take-a-tour-of-the-example-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>You build Angular applications with components.\nComponents define areas of responsibility in the UI that let you reuse sets of UI functionality.</p>\n<p>A component consists of three things:</p>\n<ul>\n<li><strong>A component class</strong> that handles data and functionality.</li>\n<li><strong>An HTML template</strong> that determines the UI.</li>\n<li><strong>Component-specific styles</strong> that define the look and feel.</li>\n</ul>\n<p>This guide demonstrates building an application with the following components.</p>\n<ul>\n<li><code><app-root></code>—the first component to load and the container for the other components.</li>\n<li><code><app-top-bar></code>—the store name and checkout button.</li>\n<li><code><app-product-list></code>—the product list.</li>\n<li><code><app-product-alerts></code>—a component that contains the application's alerts.</li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/app-components.png\" alt=\"Online store with three components\" width=\"324\" height=\"527\">\n</div>\n<p>For more information about components, see <a href=\"guide/architecture-components\" title=\"Introduction to Components and Templates\">Introduction to Components</a>.</p>\n<a id=\"new-project\"></a>\n<h2 id=\"create-the-sample-project\">Create the sample project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#create-the-sample-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>To create the sample project, generate the <live-example name=\"getting-started-v0\" nodownload=\"\">ready-made sample project in StackBlitz</live-example>.\nTo save your work:</p>\n<ol>\n<li>Log into StackBlitz.</li>\n<li>Fork the project you generated.</li>\n<li>Save periodically.</li>\n</ol>\n<p>In StackBlitz, the preview pane on the right shows the starting state of the example application.\nThe preview features two areas:</p>\n<ul>\n<li>a top bar with the store name, <em>My Store</em>, and a checkout button</li>\n<li>a header for a product list, <em>Products</em></li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/new-app-all.gif\" alt=\"Starter online store application\" width=\"600\" height=\"219\">\n</div>\n<p>The project section on the left shows the source files that make up the application, including the infrastructure and configuration files.</p>\n<p>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 <code>src</code> folder.</p>\n<p>For more information on how to use StackBlitz, see the <a href=\"https://developer.stackblitz.com/docs/platform/\">StackBlitz documentation</a>.</p>\n<a id=\"product-list\"></a>\n<h2 id=\"create-the-product-list\">Create the product list<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#create-the-product-list\"><i class=\"material-icons\">link</i></a></h2>\n<p>In this section, you'll update the application to display a list of products.\nYou'll use predefined product data from the <code>products.ts</code> file and methods from the <code>product-list.component.ts</code> file.\nThis section guides you through editing the HTML, also known as the template.</p>\n<ol>\n<li>\n<p>In the <code>product-list</code> folder, open the template file <code>product-list.component.html</code>.</p>\n</li>\n<li>\n<p>Add an <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> structural directive on a <code><div></code>, as follows.</p>\n<code-example header=\"src/app/product-list/product-list.component.html\" path=\"getting-started/src/app/product-list/product-list.component.2.html\" region=\"ngfor\">\n<h2>Products</h2>\n\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let product of products\">\n</div>\n\n</code-example>\n<p>With <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code>, the <code><div></code> repeats for each product in the list.</p>\n<p>Structural directives shape or reshape the DOM's structure, by adding, removing, and manipulating elements.\nFor more information about structural directives, see <a href=\"guide/structural-directives\">Structural directives</a>.</p>\n</li>\n<li>\n<p>Inside the <code><div></code>, add an <code><h3></code> and <code>{{ product.name }}</code>.\nThe <code>{{ product.name }}</code> statement is an example of Angular's interpolation syntax.\nInterpolation <code>{{ }}</code> lets you render the property value as text.</p>\n <code-example path=\"getting-started/src/app/product-list/product-list.component.2.html\" header=\"src/app/product-list/product-list.component.html\" region=\"interpolation\">\n<h2>Products</h2>\n\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let product of products\">\n\n <h3>\n {{ product.name }}\n </h3>\n\n</div>\n\n</code-example>\n<p> The preview pane updates to display the name of each product in the list.</p>\n <div class=\"lightbox\">\n <img src=\"generated/images/guide/start/template-syntax-product-names.png\" alt=\"Product names added to list\" width=\"259\" height=\"271\">\n </div>\n</li>\n<li>\n<p>To make each product name a link to product details, add the <code><a></code> element around <code>{{ product.name }}</code>.</p>\n</li>\n<li>\n<p>Set the title to be the product's name by using the property binding <code>[ ]</code> syntax, as follows:</p>\n<code-example path=\"getting-started/src/app/product-list/product-list.component.2.html\" header=\"src/app/product-list/product-list.component.html\">\n<h2>Products</h2>\n\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"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</code-example>\n<p>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 <code>[ ]</code> lets you use the property value in a template expression.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/template-syntax-product-anchor.png\" alt=\"Product name anchor text is product name property\" width=\"259\" height=\"271\">\n</div>\n</li>\n<li>\n<p>Add the product descriptions. On a <code><p></code> element, use an <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> directive so that Angular only creates the <code><p></code> element if the current product has a description.</p>\n<code-example path=\"getting-started/src/app/product-list/product-list.component.3.html\" header=\"src/app/product-list/product-list.component.html\">\n<h2>Products</h2>\n\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\">\n {{ product.name }}\n </a>\n </h3>\n\n <p *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"product.description\">\n Description: {{ product.description }}\n </p>\n\n</div>\n\n\n</code-example>\n<p>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 <code><p></code> element because the product's description property is empty.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/template-syntax-product-description.png\" alt=\"Product descriptions added to list\" width=\"259\" height=\"289\">\n</div>\n</li>\n<li>\n<p>Add a button so users can share a product.\nBind the button's <code>click</code> event to the <code>share()</code> method in <code>product-list.component.ts</code>. Event binding uses a set of parentheses, <code>( )</code>, around the event, as in the <code>(click)</code> event on the <code><button></code> element.</p>\n <code-example path=\"getting-started/src/app/product-list/product-list.component.4.html\" header=\"src/app/product-list/product-list.component.html\">\n<h2>Products</h2>\n\n<div *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\">\n {{ product.name }}\n </a>\n </h3>\n\n <p *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"product.description\">\n Description: {{ product.description }}\n </p>\n\n <button (click)=\"share()\">\n Share\n </button>\n\n</div>\n\n\n</code-example>\n<p> Each product now has a <strong>Share</strong> button.</p>\n <div class=\"lightbox\">\n <img src=\"generated/images/guide/start/template-syntax-product-share-button.png\" alt=\"Share button added for each product\" width=\"259\" height=\"376\">\n </div>\n<p> Clicking the <strong>Share</strong> button triggers an alert that states, \"The product has been shared!\".</p>\n <div class=\"lightbox\">\n <img src=\"generated/images/guide/start/template-syntax-product-share-alert.png\" alt=\"Alert box indicating product has been shared\" width=\"330\" height=\"104\">\n </div>\n</li>\n</ol>\n<p>In editing the template, you have explored some of the most popular features of Angular templates.\nFor more information, see <a href=\"guide/architecture-components#template-syntax\" title=\"Template Syntax\">Introduction to components and templates</a>.</p>\n<a id=\"passing-data-in\"></a>\n<h2 id=\"pass-data-to-a-child-component\">Pass data to a child component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#pass-data-to-a-child-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>Currently, the product list displays the name and description of each product.\nThe <code>ProductListComponent</code> also defines a <code>products</code> property that contains imported data for each product from the <code>products</code> array in <code>products.ts</code>.</p>\n<p>The next step is to create a new alert feature that uses product data from the <code>ProductListComponent</code>.\nThe alert checks the product's price, and, if the price is greater than $700, displays a <strong>Notify Me</strong> button that lets users sign up for notifications when the product goes on sale.</p>\n<p>This section walks you through creating a child component, <code>ProductAlertsComponent</code> that can receive data from its parent component, <code>ProductListComponent</code>.</p>\n<ol>\n<li>\n<p>Right click on the <code>app</code> folder and use the <code>Angular Generator</code> to generate a new component named <code>product-alerts</code>.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/generate-component.png\" alt=\"StackBlitz command to generate component\" width=\"407\" height=\"368\">\n</div>\n<p> The generator creates starter files for the three parts of the component:</p>\n<ul>\n<li><code>product-alerts.component.ts</code></li>\n<li><code>product-alerts.component.html</code></li>\n<li><code>product-alerts.component.css</code></li>\n</ul>\n</li>\n<li>\n<p>Open <code>product-alerts.component.ts</code>.\nThe <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> decorator indicates that the following class is a component.\n<code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> also provides metadata about the component, including its selector, templates, and styles.</p>\n<code-example header=\"src/app/product-alerts/product-alerts.component.ts\" path=\"getting-started/src/app/product-alerts/product-alerts.component.1.ts\" region=\"as-generated\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-product-alerts',\n templateUrl: './product-alerts.component.html',\n styleUrls: ['./product-alerts.component.css']\n})\nexport class ProductAlertsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n\n\n</code-example>\n<p>Key features in the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> are as follows:</p>\n<ul>\n<li>The <code>selector</code>, <code>app-product-alerts</code>, identifies the component.\nBy convention, Angular component selectors begin with the prefix <code>app-</code>, followed by the component name.</li>\n<li>The template and style filenames reference the component's HTML and CSS.</li>\n<li>The <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code> definition also exports the class, <code>ProductAlertsComponent</code>, which handles functionality for the component.</li>\n</ul>\n</li>\n<li>\n<p>To set up <code>ProductAlertsComponent</code> to receive product data, first import <code><a href=\"api/core/Input\" class=\"code-anchor\">Input</a></code> from <code>@angular/core</code>.</p>\n<code-example path=\"getting-started/src/app/product-alerts/product-alerts.component.1.ts\" region=\"imports\" header=\"src/app/product-alerts/product-alerts.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> } from '@angular/core';\nimport { <a href=\"api/core/Input\" class=\"code-anchor\">Input</a> } from '@angular/core';\n\n</code-example>\n</li>\n<li>\n<p>In the <code>ProductAlertsComponent</code> class definition, define a property named <code>product</code> with an <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> decorator.\nThe <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> decorator indicates that the property value passes in from the component's parent, <code>ProductListComponent</code>.</p>\n<code-example path=\"getting-started/src/app/product-alerts/product-alerts.component.1.ts\" region=\"input-decorator\" header=\"src/app/product-alerts/product-alerts.component.ts\">\nexport class ProductAlertsComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a> {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() product;\n constructor() { }\n\n ngOnInit() {\n }\n\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Open <code>product-alerts.component.html</code> and replace the placeholder paragraph with a <strong>Notify Me</strong> button that appears if the product price is over $700.</p>\n<code-example header=\"src/app/product-alerts/product-alerts.component.html\" path=\"getting-started/src/app/product-alerts/product-alerts.component.1.html\">\n<p *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"product.price > 700\">\n <button>Notify Me</button>\n</p>\n\n\n</code-example>\n</li>\n<li>\n<p>To display <code>ProductAlertsComponent</code> as a child of <code>ProductListComponent</code>, add the selector, <code><app-product-alerts></code> to <code>product-list.component.html</code>.\nPass the current product as input to the component using property binding.</p>\n<code-example header=\"src/app/product-list/product-list.component.html\" path=\"getting-started/src/app/product-list/product-list.component.5.html\" region=\"app-product-alerts\">\n<button (click)=\"share()\">\n Share\n</button>\n\n<app-product-alerts\n [product]=\"product\">\n</app-product-alerts>\n\n</code-example>\n</li>\n</ol>\n<p>The new product alert component takes a product as input from the product list.\nWith that input, it shows or hides the <strong>Notify Me</strong> button, based on the price of the product.\nThe Phone XL price is over $700, so the <strong>Notify Me</strong> button appears on that product.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/product-alert-button.png\" alt=\"Product alert button added to products over $700\" width=\"259\" height=\"406\">\n</div>\n<a id=\"output\"></a>\n<h2 id=\"pass-data-to-a-parent-component\">Pass data to a parent component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#pass-data-to-a-parent-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>To make the <strong>Notify Me</strong> button work, the child component needs to notify and pass the data to the parent component.\nThe <code>ProductAlertsComponent</code> needs to emit an event when the user clicks <strong>Notify Me</strong> and the <code>ProductListComponent</code> needs to respond to the event.</p>\n<ol>\n<li>\n<p>In <code>product-alerts.component.ts</code>, import <code><a href=\"api/core/Output\" class=\"code-anchor\">Output</a></code> and <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code> from <code>@angular/core</code>.</p>\n<code-example header=\"src/app/product-alerts/product-alerts.component.ts\" path=\"getting-started/src/app/product-alerts/product-alerts.component.ts\" region=\"imports\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { <a href=\"api/core/Input\" class=\"code-anchor\">Input</a> } from '@angular/core';\nimport { <a href=\"api/core/Output\" class=\"code-anchor\">Output</a>, <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a> } from '@angular/core';\n\n</code-example>\n</li>\n<li>\n<p>In the component class, define a property named <code>notify</code> with an <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> decorator and an instance of <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>()</code>.\nConfiguring <code>ProductAlertsComponent</code> with an <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> allows the <code>ProductAlertsComponent</code> to emit an event when the value of the <code>notify</code> property changes.</p>\n<code-example path=\"getting-started/src/app/product-alerts/product-alerts.component.ts\" header=\"src/app/product-alerts/product-alerts.component.ts\" region=\"input-output\">\nexport class ProductAlertsComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() product;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() notify = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();\n}\n\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>In new components, the Angular Generator includes an empty <code>constructor()</code>, the <code><a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a></code> interface, and the <code>ngOnInit()</code> method.\nSince these steps don't use them, the following code example omits them for brevity.</p>\n</div>\n</li>\n<li>\n<p>In <code>product-alerts.component.html</code>, update the <strong>Notify Me</strong> button with an event binding to call the <code>notify.emit()</code> method.</p>\n<code-example header=\"src/app/product-alerts/product-alerts.component.html\" path=\"getting-started/src/app/product-alerts/product-alerts.component.html\">\n<p *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"product.price > 700\">\n <button (click)=\"notify.emit()\">Notify Me</button>\n</p>\n\n\n</code-example>\n</li>\n<li>\n<p>Define the behavior that happens when the user clicks the button.\nThe parent, <code>ProductListComponent</code>—not the <code>ProductAlertsComponent</code>—acts when the child raises the event.\nIn <code>product-list.component.ts</code>, define an <code>onNotify()</code> method, similar to the <code>share()</code> method.</p>\n<code-example header=\"src/app/product-list/product-list.component.ts\" path=\"getting-started/src/app/product-list/product-list.component.ts\" region=\"on-notify\">\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</code-example>\n</li>\n<li>\n<p>Update the <code>ProductListComponent</code> to receive data from the <code>ProductAlertsComponent</code>.</p>\n<p>In <code>product-list.component.html</code>, bind <code><app-product-alerts></code> to the <code>onNotify()</code> method of the product list component.\n<code><app-product-alerts></code> is what displays the <strong>Notify Me</strong> button.</p>\n<p> <code-example header=\"src/app/product-list/product-list.component.html\" path=\"getting-started/src/app/product-list/product-list.component.6.html\" region=\"on-notify\">\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</code-example></p>\n</li>\n<li>\n<p>Click the <strong>Notify Me</strong> button to trigger an alert which reads, \"You will be notified when the product goes on sale\".</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/product-alert-notification.png\" alt=\"Product alert notification confirmation dialog\" width=\"329\" height=\"104\">\n</div>\n</li>\n</ol>\n<p>For more information on communication between components, see <a href=\"guide/component-interaction\" title=\"Component interaction\">Component Interaction</a>.</p>\n<a id=\"whats-next\"></a>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>In this section, you've created an application that iterates through data and features components that communicate with each other.</p>\n<p>To continue exploring Angular and developing this application:</p>\n<ul>\n<li>Continue to <a href=\"start/start-routing\" title=\"Getting started: In-app navigation\">In-app navigation</a> to create a product details page.</li>\n<li>Skip ahead to <a href=\"start/start-deployment\" title=\"Getting started: Deployment\">Deployment</a> to move to local development, or deploy your app to Firebase or your own server.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - docs\n - features\n - guide/docs-style-guide\n - guide/example-apps-list\n - guide/router\n - guide/router-tutorial-toh\n - guide/setup-local\n - index\n - start/start-data\n - start/start-deployment\n - start/start-forms\n - start/start-routing\n - tutorial\n-->\n<!-- links from this doc:\n - api/common/NgForOf\n - api/common/NgIf\n - api/core/Component\n - api/core/EventEmitter\n - api/core/Input\n - api/core/OnInit\n - api/core/Output\n - guide/architecture-components\n - guide/architecture-components#template-syntax\n - guide/component-interaction\n - guide/setup-local\n - guide/structural-directives\n - start#create-the-product-list\n - start#create-the-sample-project\n - start#getting-started-with-angular\n - start#pass-data-to-a-child-component\n - start#pass-data-to-a-parent-component\n - start#prerequisites\n - start#take-a-tour-of-the-example-application\n - start#whats-next\n - start/start-deployment\n - start/start-routing\n - https://developer.mozilla.org/en-US/docs/Learn/HTML\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript\n - https://developer.stackblitz.com/docs/platform/\n - https://github.com/angular/angular/edit/master/aio/content/start/index.md?message=docs%3A%20describe%20your%20change...\n - https://stackblitz.com/\n - https://www.typescriptlang.org/\n-->"
|
|
} |