From 672d8d25529bef11bb8d5710039bbf5c7172ff27 Mon Sep 17 00:00:00 2001 From: Sonu Kapoor Date: Thu, 20 Feb 2020 22:18:23 -0500 Subject: [PATCH] fix(docs-infra): change `app-list-item` to `app-item-list` The `app-list-item` component sounds like it is used for a single item, however it renders a list of items. There were also several changes in the documentation, where it was becoming confusing if the `app-list-item` is using a single item or multiple items. This commit fixes this issue. It renames the component and its respective properties to make sure that the intention is very clear. Closes #35598 --- .../property-binding/src/app/app.component.html | 2 +- .../property-binding/src/app/app.component.ts | 2 +- .../property-binding/src/app/app.module.ts | 4 ++-- .../item-list.component.css} | 0 .../item-list.component.html} | 0 .../item-list.component.spec.ts} | 10 +++++----- .../item-list.component.ts} | 8 ++++---- aio/content/guide/template-syntax.md | 14 +++++++------- 8 files changed, 20 insertions(+), 20 deletions(-) rename aio/content/examples/property-binding/src/app/{list-item/list-item.component.css => item-list/item-list.component.css} (100%) rename aio/content/examples/property-binding/src/app/{list-item/list-item.component.html => item-list/item-list.component.html} (100%) rename aio/content/examples/property-binding/src/app/{list-item/list-item.component.spec.ts => item-list/item-list.component.spec.ts} (61%) rename aio/content/examples/property-binding/src/app/{list-item/list-item.component.ts => item-list/item-list.component.ts} (63%) 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 e6ca6e5b0ae0c..4e88175854f17 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 @@

Model property of a custom component:

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 c8dd3b5fe4d30..cfe9abe4ddaaf 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 24c86b6bcfc98..eee2b65f4b3d4 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 0568b6c4c24a9..e11a57d78cd9e 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 48d1992cde8b2..38d29e0f64807 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 7e7bd9b2d1ea9..7dc78556696f8 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -731,13 +731,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`. @@ -748,11 +748,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 @@ -781,7 +781,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