reduce the number of ng-template's needed in list-item and list-option

Author: mmalerba

src/material-experimental/mdc-list/list-option.html

@@ -1,16 +1,25 @@
-<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
-
-<!-- If lines were explicitly given, use those as the text. -->
-<ng-container *ngIf="lines.length">
-  <span class="mdc-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
-</ng-container>
-
-<!--
-  If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
-  is an action that belongs in the "meta" section.
--->
-<span [class.mdc-list-item__text]="!lines.length" [class.mdc-list-item__meta]="!!lines.length">
+<!-- Save icons and unclassified content to be places later -->
+<ng-template #icons>
+  <ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
+</ng-template>
+<ng-template #unsortedContent>
   <ng-content></ng-content>
-</span>
+</ng-template>
 
+<!-- Prefix -->
+<span class="mdc-list-item__graphic" *ngIf="checkboxPosition !== 'after' else icons">
+  <mat-pseudo-checkbox></mat-pseudo-checkbox>
+</span>
+<!-- Text -->
+<span class="mdc-list-item__text">
+  <ng-content *ngIf="lines.length else unsortedContent" select="[mat-line],[matLine]"></ng-content>
+</span>
+<!-- Suffix -->
+<span class="mdc-list-item__meta">
+  <span class="mdc-list-item__graphic" *ngIf="checkboxPosition === 'after' else icons">
+    <mat-pseudo-checkbox></mat-pseudo-checkbox>
+  </span>
+  <ng-container *ngIf="lines.length" [ngTemplateOutlet]="unsortedContent"></ng-container>
+</span>
+<!-- Divider -->
 <ng-content select="mat-divider"></ng-content>

src/material-experimental/mdc-list/list.scss

@@ -108,3 +108,8 @@
   right: 0;
   opacity: 0;
 }
+
+.mat-mdc-list-option .mdc-list-item__meta .mdc-list-item__graphic {
+  margin-right: 0;
+  vertical-align: middle;
+}

src/material-experimental/mdc-list/module.ts

@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLineModule, MatRippleModule} from '@angular/material/core';
+import {MatLineModule, MatPseudoCheckboxModule, MatRippleModule} from '@angular/material/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatActionList} from './action-list';
 import {
@@ -26,6 +26,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
     CommonModule,
     MatLineModule,
     MatRippleModule,
+    MatPseudoCheckboxModule,
   ],
   exports: [
     MatList,

src/material-experimental/mdc-list/selection-list.ts

@@ -106,7 +106,7 @@ export class MatListOption extends MatListItemBase {
 
   // TODO: Implement these inputs.
   @Input() disableRipple: boolean;
-  @Input() checkboxPosition: 'before' | 'after';
+  @Input() checkboxPosition: 'before' | 'after' = 'before';
   @Input() color: ThemePalette;
   @Input() value: any;
   @Input() disabled: boolean;