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