Add template file for list

Author: tinayuangao

src/demo-app/a11y/list/list-a11y.html

@@ -2,21 +2,21 @@
   <section>
     <h2> Seasoning </h2>
     <p>Showing a non-interactive list of seasonings.</p>
-    <md-list role="list">
-      <md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
-    </md-list>
+    <mat-list role="list">
+      <mat-list-item *ngFor="let item of items"> {{item}} </mat-list-item>
+    </mat-list>
   </section>
 
 
   <section>
     <h2>Mailbox navigation</h2>
     <p>Showing a navigation list with links to google search</p>
-    <md-nav-list>
-      <a md-list-item *ngFor="let link of links"
+    <mat-nav-list>
+      <a mat-list-item *ngFor="let link of links"
          href="https://www.google.com/search?q={{link.name}}">
         {{link.name}}
       </a>
-    </md-nav-list>
+    </mat-nav-list>
   </section>
 
   <section>
@@ -25,42 +25,42 @@ <h2>Messages</h2>
       Showing a list of messages, where each message item has sender's name, sender's avatar,
       message subject, and content of the message.
     </p>
-    <md-list role="list">
-      <md-list-item *ngFor="let message of messages">
-        <img md-list-avatar [src]="message.image" [alt]="message.from">
-        <h3 md-line> {{message.from}} </h3>
-        <p md-line> {{message.subject}} </p>
-        <p md-line class="demo-secondary-text"> {{message.message}} </p>
-      </md-list-item>
-    </md-list>
+    <mat-list role="list">
+      <mat-list-item *ngFor="let message of messages">
+        <img mat-list-avatar [src]="message.image" [alt]="message.from">
+        <h3 mat-line> {{message.from}} </h3>
+        <p mat-line> {{message.subject}} </p>
+        <p mat-line class="demo-secondary-text"> {{message.message}} </p>
+      </mat-list-item>
+    </mat-list>
 
   </section>
 
   <section>
     <h2>Seasoning</h2>
     <p>Showing a non-interactive list of seasonings with dense style.</p>
-    <md-list dense>
-      <md-list-item *ngFor="let item of items"> {{item}} </md-list-item>
-    </md-list>
+    <mat-list dense>
+      <mat-list-item *ngFor="let item of items"> {{item}} </mat-list-item>
+    </mat-list>
   </section>
 
   <section>
     <h2>Folders and notes for mailbox </h2>
     <p>Showing a list with two sections, "folders" and "notes".</p>
-    <md-list role="list">
-      <h3 md-subheader>Folders</h3>
-      <md-list-item *ngFor="let folder of folders">
-        <md-icon md-list-icon>folder</md-icon>
-        <h4 md-line>{{folder.name}}</h4>
-        <p md-line class="demo-secondary-text"> {{folder.updated}} </p>
-      </md-list-item>
-      <md-divider></md-divider>
-      <h3 md-subheader>Notes</h3>
-      <md-list-item *ngFor="let note of notes">
-        <md-icon md-list-icgon>note</md-icon>
-        <h4 md-line>{{note.name}}</h4>
-        <p md-line class="demo-secondary-text"> {{note.updated}} </p>
-      </md-list-item>
-    </md-list>
+    <mat-list role="list">
+      <h3 mat-subheader>Folders</h3>
+      <mat-list-item *ngFor="let folder of folders">
+        <mat-icon mat-list-icon>folder</mat-icon>
+        <h4 mat-line>{{folder.name}}</h4>
+        <p mat-line class="demo-secondary-text"> {{folder.updated}} </p>
+      </mat-list-item>
+      <mat-divider></mat-divider>
+      <h3 mat-subheader>Notes</h3>
+      <mat-list-item *ngFor="let note of notes">
+        <mat-icon mat-list-icgon>note</mat-icon>
+        <h4 mat-line>{{note.name}}</h4>
+        <p mat-line class="demo-secondary-text"> {{note.updated}} </p>
+      </mat-list-item>
+    </mat-list>
   </section>
 </div>

src/demo-app/a11y/list/list-a11y.ts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 import {Component} from '@angular/core';
 
 @Component({

src/lib/list/list-module.ts

@@ -17,13 +17,12 @@ import {
 import {
   MatDividerCssMatStyler,
   MatList,
+  MatNavList,
   MatListAvatarCssMatStyler,
-  MatListCssMatStyler,
   MatListDivider,
   MatListIconCssMatStyler,
   MatListItem,
   MatListSubheaderCssMatStyler,
-  MatNavListCssMatStyler,
 } from './list';
 import {MatListOption, MatSelectionList} from './selection-list';
 
@@ -32,14 +31,13 @@ import {MatListOption, MatSelectionList} from './selection-list';
   imports: [MatLineModule, MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, CommonModule],
   exports: [
     MatList,
+    MatNavList,
     MatListItem,
     MatListDivider,
     MatListAvatarCssMatStyler,
     MatLineModule,
     MatCommonModule,
     MatListIconCssMatStyler,
-    MatListCssMatStyler,
-    MatNavListCssMatStyler,
     MatDividerCssMatStyler,
     MatListSubheaderCssMatStyler,
     MatPseudoCheckboxModule,
@@ -48,12 +46,11 @@ import {MatListOption, MatSelectionList} from './selection-list';
   ],
   declarations: [
     MatList,
+    MatNavList,
     MatListItem,
     MatListDivider,
     MatListAvatarCssMatStyler,
     MatListIconCssMatStyler,
-    MatListCssMatStyler,
-    MatNavListCssMatStyler,
     MatDividerCssMatStyler,
     MatListSubheaderCssMatStyler,
     MatSelectionList,

src/lib/list/list.html

@@ -0,0 +1,2 @@
+<ng-content></ng-content>
+

src/lib/list/list.ts

@@ -50,7 +50,7 @@ export class MatListDivider {}
     'role': 'navigation',
     'class': 'mat-nav-list'
   },
-  template: '<ng-content></ng-content>',
+  templateUrl: 'list.html',
   styleUrls: ['list.css'],
   inputs: ['disableRipple'],
   encapsulation: ViewEncapsulation.None,
@@ -63,11 +63,12 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {}
   moduleId: module.id,
   selector: 'mat-list',
   exportAs: 'matList',
-  template: '<ng-content></ng-content>',
+  templateUrl: 'list.html',
   host: {'class': 'mat-list'},
   styleUrls: ['list.css'],
   inputs: ['disableRipple'],
   encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatList extends _MatListMixinBase implements CanDisableRipple {}
@@ -145,15 +146,8 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
     }
   }
 
-<<<<<<< HEAD
   constructor(private _element: ElementRef,
-              @Optional() private _list: MatList,
-              @Optional() navList: MatNavListCssMatStyler) {
-=======
-  constructor(private _renderer: Renderer2,
-              private _element: ElementRef,
-              @Optional() private _navList: MdNavList) {
->>>>>>> demo(list): Add accessibility demo page for list
+              @Optional() private _navList: MatNavList) {
     super();
     this._isNavList = !!_navList;
   }