fix(docs-infra): change `app-list-item` to `app-item-list` (#35601)

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

PR Close #35601

aio/content/examples/property-binding/src/app/app.component.html

@@ -46,7 +46,7 @@
 
   <h3>Pass objects:</h3>
   <!-- #docregion pass-object -->
-  <app-list-item [items]="currentItem"></app-list-item>
+  <app-item-list [items]="currentItems"></app-item-list>
   <!-- #enddocregion pass-object -->
 
   <hr />

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'
   }];

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: [

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<ListItemComponent>;
+  let component: ItemListComponent;
+  let fixture: ComponentFixture<ItemListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ListItemComponent ]
+      declarations: [ ItemListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ListItemComponent);
+    fixture = TestBed.createComponent(ItemListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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[];

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.
 
 <code-example path="property-binding/src/app/app.component.html" region="pass-object" header="src/app/app.component.html"></code-example>
 
-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()`:
 
-<code-example path="property-binding/src/app/list-item/list-item.component.ts" region="item-input" header="src/app/list-item.component.ts"></code-example>
+<code-example path="property-binding/src/app/item-list/item-list.component.ts" region="item-input" header="src/app/item-list.component.ts"></code-example>
 
 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:
 
 <code-example path="property-binding/src/app/app.component.ts" region="pass-object" header="src/app.component.ts"></code-example>
 
-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.
 
 <code-example path="property-binding/src/app/app.component.html" region="string-init" header="src/app/app.component.html"></code-example>
 
-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