diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html
index e6ca6e5b0a..4e88175854 100644
--- a/aio/content/examples/property-binding/src/app/app.component.html
+++ b/aio/content/examples/property-binding/src/app/app.component.html
@@ -46,7 +46,7 @@
Pass objects:
-
+
diff --git a/aio/content/examples/property-binding/src/app/app.component.ts b/aio/content/examples/property-binding/src/app/app.component.ts
index c8dd3b5fe4..cfe9abe4dd 100644
--- a/aio/content/examples/property-binding/src/app/app.component.ts
+++ b/aio/content/examples/property-binding/src/app/app.component.ts
@@ -15,7 +15,7 @@ export class AppComponent {
// #enddocregion parent-data-type
// #docregion pass-object
- currentItem = [{
+ currentItems = [{
id: 21,
name: 'phone'
}];
diff --git a/aio/content/examples/property-binding/src/app/app.module.ts b/aio/content/examples/property-binding/src/app/app.module.ts
index 24c86b6bcf..eee2b65f4b 100644
--- a/aio/content/examples/property-binding/src/app/app.module.ts
+++ b/aio/content/examples/property-binding/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ItemDetailComponent } from './item-detail/item-detail.component';
-import { ListItemComponent } from './list-item/list-item.component';
+import { ItemListComponent } from './item-list/item-list.component';
import { StringInitComponent } from './string-init/string-init.component';
@@ -12,7 +12,7 @@ import { StringInitComponent } from './string-init/string-init.component';
declarations: [
AppComponent,
ItemDetailComponent,
- ListItemComponent,
+ ItemListComponent,
StringInitComponent
],
imports: [
diff --git a/aio/content/examples/property-binding/src/app/list-item/list-item.component.css b/aio/content/examples/property-binding/src/app/item-list/item-list.component.css
similarity index 100%
rename from aio/content/examples/property-binding/src/app/list-item/list-item.component.css
rename to aio/content/examples/property-binding/src/app/item-list/item-list.component.css
diff --git a/aio/content/examples/property-binding/src/app/list-item/list-item.component.html b/aio/content/examples/property-binding/src/app/item-list/item-list.component.html
similarity index 100%
rename from aio/content/examples/property-binding/src/app/list-item/list-item.component.html
rename to aio/content/examples/property-binding/src/app/item-list/item-list.component.html
diff --git a/aio/content/examples/property-binding/src/app/list-item/list-item.component.spec.ts b/aio/content/examples/property-binding/src/app/item-list/item-list.component.spec.ts
similarity index 61%
rename from aio/content/examples/property-binding/src/app/list-item/list-item.component.spec.ts
rename to aio/content/examples/property-binding/src/app/item-list/item-list.component.spec.ts
index 0568b6c4c2..e11a57d78c 100644
--- a/aio/content/examples/property-binding/src/app/list-item/list-item.component.spec.ts
+++ b/aio/content/examples/property-binding/src/app/item-list/item-list.component.spec.ts
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ListItemComponent } from './list-item.component';
+import { ItemListComponent } from './item-list.component';
describe('ItemListComponent', () => {
- let component: ListItemComponent;
- let fixture: ComponentFixture;
+ let component: ItemListComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ ListItemComponent ]
+ declarations: [ ItemListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(ListItemComponent);
+ fixture = TestBed.createComponent(ItemListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/aio/content/examples/property-binding/src/app/list-item/list-item.component.ts b/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
similarity index 63%
rename from aio/content/examples/property-binding/src/app/list-item/list-item.component.ts
rename to aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
index 48d1992cde..38d29e0f64 100644
--- a/aio/content/examples/property-binding/src/app/list-item/list-item.component.ts
+++ b/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
@@ -3,11 +3,11 @@ import { ITEMS } from '../mock-items';
import { Item } from '../item';
@Component({
- selector: 'app-list-item',
- templateUrl: './list-item.component.html',
- styleUrls: ['./list-item.component.css']
+ selector: 'app-item-list',
+ templateUrl: './item-list.component.html',
+ styleUrls: ['./item-list.component.css']
})
-export class ListItemComponent {
+export class ItemListComponent {
listItems = ITEMS;
// #docregion item-input
@Input() items: Item[];
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 71a20f730c..1cbcf49ba3 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -730,13 +730,13 @@ As you can see here, the `parentItem` in `AppComponent` is a string, which the `
The previous simple example showed passing in a string. To pass in an object,
the syntax and thinking are the same.
-In this scenario, `ListItemComponent` is nested within `AppComponent` and the `items` property expects an array of objects.
+In this scenario, `ItemListComponent` is nested within `AppComponent` and the `items` property expects an array of objects.
-The `items` property is declared in the `ListItemComponent` with a type of `Item` and decorated with `@Input()`:
+The `items` property is declared in the `ItemListComponent` with a type of `Item` and decorated with `@Input()`:
-
+
In this sample app, an `Item` is an object that has two properties; an `id` and a `name`.
@@ -747,11 +747,11 @@ specify a different item in `app.component.ts` so that the new item will render:
-You just have to make sure, in this case, that you're supplying an array of objects because that's the type of `items` and is what the nested component, `ListItemComponent`, expects.
+You just have to make sure, in this case, that you're supplying an array of objects because that's the type of `Item` and is what the nested component, `ItemListComponent`, expects.
In this example, `AppComponent` specifies a different `item` object
-(`currentItem`) and passes it to the nested `ListItemComponent`. `ListItemComponent` was able to use `currentItem` because it matches what an `Item` object is according to `item.ts`. The `item.ts` file is where
-`ListItemComponent` gets its definition of an `item`.
+(`currentItems`) and passes it to the nested `ItemListComponent`. `ItemListComponent` was able to use `currentItems` because it matches what an `Item` object is according to `item.ts`. The `item.ts` file is where
+`ItemListComponent` gets its definition of an `item`.
### Remember the brackets
@@ -780,7 +780,7 @@ not a template expression. Angular sets it and forgets about it.
-The `[item]` binding, on the other hand, remains a live binding to the component's `currentItem` property.
+The `[item]` binding, on the other hand, remains a live binding to the component's `currentItems` property.
### Property binding vs. interpolation