5 lines
20 KiB
JSON
5 lines
20 KiB
JSON
|
{
|
||
|
|
"id": "guide/inputs-outputs",
|
||
|
|
"title": "Sharing data between child and parent directives and components",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/inputs-outputs.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=\"sharing-data-between-child-and-parent-directives-and-components\">Sharing data between child and parent directives and components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/inputs-outputs#sharing-data-between-child-and-parent-directives-and-components\"><i class=\"material-icons\">link</i></a></h1>\n<p>A common pattern in Angular is sharing data between a parent component and one or more child components.\nYou can implement this pattern by using the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> and <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> directives.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<p>Consider the following hierarchy:</p>\n<code-example language=\"html\">\n<parent-component>\n <child-component></child-component>\n</parent-component>\n</code-example>\n<p>The <code><parent-component></code> serves as the context for the <code><child-component></code>.</p>\n<p><code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> and <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> give a child component a way to communicate with its parent component.\n<code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> allows a parent component to update data in the child component.\nConversely, <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> allows the child to send data to a parent component.</p>\n<a id=\"input\"></a>\n<h2 id=\"sending-data-to-a-child-component\">Sending data to a child component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/inputs-outputs#sending-data-to-a-child-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> decorator in a child component or directive signifies that the property can receive its value from its parent component.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/inputs-outputs/input.svg\" alt=\"Input data flow diagram\" width=\"671\" height=\"346\">\n</div>\n<p>To use <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code>, you must configure the parent and child.</p>\n<h3 id=\"configuring-the-child-component\">Configuring the child component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/inputs-outputs#configuring-the-child-component\"><i class=\"material-icons\">link</i></a></h3>\n<p>To use the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> decorator in a child component class, first import <code><a href=\"api/core/Input\" class=\"code-anchor\">Input</a></code> and then decorate the property with <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code>, as in the following example.</p>\n<code-example path=\"inputs-outputs/src/app/item-detail/item-detail.component.ts\" region=\"use-input\" header=\"src/app/item-detail/item-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a> } from '@angular/core'; // First, import <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>\nexport class ItemDetailComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() item: string; // decorate the property with @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()\n}\n\n</code-example>\n<p>In this case, <code>@<a hre
|
||
|
|
}
|