+
+
+
+
+
diff --git a/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.spec.ts b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.spec.ts
new file mode 100644
index 0000000000..c307491352
--- /dev/null
+++ b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemOutputComponent } from './item-output.component';
+
+describe('ItemOutputComponent', () => {
+ let component: ItemOutputComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ItemOutputComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ItemOutputComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
new file mode 100644
index 0000000000..68bbc6e584
--- /dev/null
+++ b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
@@ -0,0 +1,22 @@
+// #docregion imports
+import { Component, Output, EventEmitter } from '@angular/core';
+// #enddocregion imports
+
+@Component({
+ selector: 'app-item-output',
+ templateUrl: './item-output.component.html',
+ styleUrls: ['./item-output.component.css']
+})
+
+// #docregion item-output-class
+export class ItemOutputComponent {
+// #docregion item-output
+
+ @Output() newItemEvent = new EventEmitter();
+
+// #enddocregion item-output
+ addNewItem(value: string) {
+ this.newItemEvent.emit(value);
+ }
+}
+// #enddocregion item-output-class
diff --git a/aio/content/examples/inputs-outputs/src/index.html b/aio/content/examples/inputs-outputs/src/index.html
new file mode 100644
index 0000000000..6565652186
--- /dev/null
+++ b/aio/content/examples/inputs-outputs/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Inputs and Outputs
+
+
+
+
+
+
+
+
+
diff --git a/aio/content/examples/inputs-outputs/src/main.ts b/aio/content/examples/inputs-outputs/src/main.ts
new file mode 100644
index 0000000000..91ec6da5f0
--- /dev/null
+++ b/aio/content/examples/inputs-outputs/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.log(err));
diff --git a/aio/content/examples/inputs-outputs/stackblitz.json b/aio/content/examples/inputs-outputs/stackblitz.json
new file mode 100644
index 0000000000..f52293403f
--- /dev/null
+++ b/aio/content/examples/inputs-outputs/stackblitz.json
@@ -0,0 +1,10 @@
+{
+ "description": "Inputs and Outputs",
+ "files": [
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1,2].*"
+ ],
+ "file": "src/app/app.component.ts",
+ "tags": ["Inputs and Outputs"]
+}
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index b4c30e6ed5..487912e4ec 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1760,170 +1760,360 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
{@a inputs-outputs}
-## Input and Output properties
+## `@Input()` and `@Output()` properties
-An _Input_ property is a _settable_ property annotated with an `@Input` decorator.
-Values flow _into_ the property when it is data bound with a [property binding](#property-binding)
+`@Input()` and `@Output()` allow Angular to share data between the parent context and child directives. An `@Input()` property is writable while an `@Output()` property is observable.
-An _Output_ property is an _observable_ property annotated with an `@Output` decorator.
-The property almost always returns an Angular [`EventEmitter`](api/core/EventEmitter).
-Values flow _out_ of the component as events bound with an [event binding](#event-binding).
+Consider this example of a child/parent relationship:
-You can only bind to _another_ component or directive through its _Input_ and _Output_ properties.
+```html
+
+
+
-
+```
-Remember that all **components** are **directives**.
+Here, the `` selector, or child directive, is embedded
+within a ``, which serves as the child's context.
+
+`@Input()` and `@Output()` act as
+the API, or application programming interface, of the child
+component in that they allow the child to
+communicate with the parent. Think of `@Input()` and `@Output()` like ports
+or doorways—`@Input()` is the doorway into the component allowing data
+to flow in while `@Output()` is the doorway out of the component, allowing the
+child component to send data out.
+
+This section about `@Input()` and `@Output()` has its own . The following subsections highlight
+key points in the sample app.
+
+
+
+#### `@Input()` and `@Output()` are independent
+
+Though `@Input()` and `@Output()` often appear together in apps, you can use
+them separately. If the nested
+component is such that it only needs to send data to its parent, you wouldn't
+need an `@Input()`, only an `@Output()`. The reverse is also true in that if the
+child only needs to receive data from the parent, you'd only neeed `@Input()`.
-The following discussion refers to _components_ for brevity and
-because this topic is mostly a concern for component authors.
-
Discussion
+{@a input}
-You are usually binding a template to its _own component class_.
-In such binding expressions, the component's property or method is to the _right_ of the (`=`).
+## How to use `@Input()`
-
+Use the `@Input()` decorator in a child component or directive to let Angular know
+that a property in that component can receive its value from its parent component.
+It helps to remember that the data flow is from the perspective of the
+child component. So an `@Input()` allows data to be input _into_ the
+child component from the parent component.
+
+
+
+
+
+
+To illustrate the use of `@Input()`, edit these parts of your app:
+
+* The child component class and template
+* The parent component class and template
+
+
+### In the child
+
+To use the `@Input()` decorator in a child component class, first import
+`Input` and then decorate the property with `@Input()`:
+
+
-The `iconUrl` and `onSave` are members of the `AppComponent` class.
-They are _not_ decorated with `@Input()` or `@Output`.
-Angular does not object.
-**You can always bind to a public property of a component in its own template.**
-It doesn't have to be an _Input_ or _Output_ property
+In this case, `@Input()` decorates the property item, which has
+a type of `string`, however, `@Input()` properties can have any type, such as
+`number`, `string`, `boolean`, or `object`. The value for `item` will come from the parent component, which the next section covers.
-A component's class and template are closely coupled.
-They are both parts of the same thing.
-Together they _are_ the component.
-Exchanges between a component class and its template are internal implementation details.
+Next, in the child component template, add the following:
-### Binding to a different component
-
-You can also bind to a property of a _different_ component.
-In such bindings, the _other_ component's property is to the _left_ of the (`=`).
-
-In the following example, the `AppComponent` template binds `AppComponent` class members to properties of the `HeroDetailComponent` whose selector is `'app-hero-detail'`.
-
-
+
-The Angular compiler _may_ reject these bindings with errors like this one:
+
+
+### In the parent
+
+The next step is to bind the property in the parent component's template.
+In this example, the parent component template is `app.component.html`.
+
+First, use the child's selector, here ``, as a directive within the
+parent component template. Then, use [property binding](guide/template-syntax#property-binding)
+to bind the property in the child to the property of the parent.
+
+
+
+
+Next, in the parent component class, `app.component.ts`, designate a value for `currentItem`:
+
+
+
+
+With `@Input()`, Angular passes the value for `currentItem` to the child so that `item` renders as `Television`.
+
+The following diagram shows this structure:
+
+
+
+
+
+The target in the square brackets, `[]`, is the property you decorate
+with `@Input()` in the child component. The binding source, the part
+to the right of the equal sign, is the data that the parent
+component passes to the nested component.
+
+The key takeaway is that when binding to a child component's property in a parent component—that is, what's
+in square brackets—you must
+decorate the property with `@Input()` in the child component.
+
+
+
+#### `OnChanges` and `@Input()`
+
+To watch for changes on an `@Input()` property, use
+`OnChanges`, one of Angular's [lifecycle hooks](guide/lifecycle-hooks#onchanges).
+`OnChanges` is specifically designed to work with properties that have the
+`@Input()` decorator. See the [`OnChanges`](guide/lifecycle-hooks#onchanges) section of the [Lifecycle Hooks](guide/lifecycle-hooks) guide for more details and examples.
+
+
+
+{@a output}
+
+## How to use `@Output()`
+
+Use the `@Output()` decorator in the child component or directive to allow data to flow from
+the child _out_ to the parent.
+
+An `@Output()` property should normally be initialized to an Angular [`EventEmitter`](api/core/EventEmitter) with values flowing out of the component as [events](#event-binding).
+
+
+
+
+
+
+Just like with `@Input()`, you can use `@Output()`
+on a property of the child component but its type should be
+`EventEmitter`.
+
+`@Output()` marks a property in a child component as a doorway
+through which data can travel from the child to the parent.
+The child component then has to raise an event so the
+parent knows something has changed. To raise an event,
+`@Output()` works hand in hand with `EventEmitter`,
+which is a class in `@angular/core` that you
+use to emit custom events.
+
+When you use `@Output()`, edit these parts of your app:
+
+* The child component class and template
+* The parent component class and template
+
+
+The following example shows how to set up an `@Output()` in a child
+component that pushes data you enter in an HTML `` to an array in the
+parent component.
+
+
+
+The HTML element `` and the Angular decorator `@Input()`
+are different. This documentation is about component communication in Angular as it pertains to `@Input()` and `@Output()`. For more information on the HTML element ``, see the [W3C Recommendation](https://www.w3.org/TR/html5/sec-forms.html#the-input-element).
+
+
+
+### In the child
+
+This example features an `` where a user can enter a value and click a `
+
+
+