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