address feedback

Author: mmalerba

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

@@ -47,22 +47,19 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
   // TODO(mmalerba): Add @Input for disabling ripple.
   rippleDisabled: boolean;
 
-  _element: HTMLElement;
-
   private _subscriptions = new Subscription();
 
   private _rippleRenderer: RippleRenderer;
 
-  protected constructor(private _elementRef: ElementRef<HTMLElement>, protected _ngZone: NgZone,
+  protected constructor(public _elementRef: ElementRef<HTMLElement>, protected _ngZone: NgZone,
                         listBase: MatListBase, platform: Platform) {
-    this._element = this._elementRef.nativeElement;
     this.rippleDisabled = listBase._isNonInteractive;
     if (!listBase._isNonInteractive) {
-      this._element.classList.add('mat-mdc-list-item-interactive');
+      this._elementRef.nativeElement.classList.add('mat-mdc-list-item-interactive');
     }
     this._rippleRenderer =
-        new RippleRenderer(this, this._ngZone, this._element, platform);
-    this._rippleRenderer.setupTriggerEvents(this._element);
+        new RippleRenderer(this, this._ngZone, this._elementRef.nativeElement, platform);
+    this._rippleRenderer.setupTriggerEvents(this._elementRef.nativeElement);
   }
 
   ngAfterContentInit() {
@@ -74,8 +71,15 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     this._rippleRenderer._removeTriggerEvents();
   }
 
+  /**
+   * Changes the tabindex of all button and anchor children of this item.
+   *
+   * This method is used by the `MatInteractiveBaseList` to implement the
+   * `setTabIndexForListItemChildren` method on the `MDCListAdapter`
+   */
   _setTabIndexForChildren(value: number) {
-    this._element.querySelectorAll('a, button').forEach(el => (el as HTMLElement).tabIndex = value);
+    this._elementRef.nativeElement.querySelectorAll<HTMLElement>('a, button')
+        .forEach(el => el.tabIndex = value);
   }
 
   /**
@@ -86,7 +90,7 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
     this._ngZone.runOutsideAngular(() => {
       this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
           .subscribe((lines: QueryList<ElementRef<Element>>) => {
-            this._element.classList
+            this._elementRef.nativeElement.classList
                 .toggle('mat-mdc-list-item-single-line', lines.length <= 1);
             lines.forEach((line: ElementRef<Element>, index: number) => {
               toggleClass(line.nativeElement,
@@ -113,7 +117,7 @@ export abstract class MatInteractiveListBase extends MatListBase
   _handleKeydown(event: KeyboardEvent) {
     const index = this._indexForElement(event.target as HTMLElement);
     this._foundation.handleKeydown(
-        event, this._itemAtIndex(index)._element === event.target, index);
+        event, this._elementAtIndex(index) === event.target, index);
   }
 
   @HostListener('click', ['$event'])
@@ -136,21 +140,20 @@ export abstract class MatInteractiveListBase extends MatListBase
   protected _adapter: MDCListAdapter = {
     getListItemCount: () => this._items.length,
     listItemAtIndexHasClass:
-        (index, className) => this._itemAtIndex(index)._element.classList.contains(className),
+        (index, className) => this._elementAtIndex(index).classList.contains(className),
     addClassForElementIndex:
-        (index, className) => this._itemAtIndex(index)._element.classList.add(className),
+        (index, className) => this._elementAtIndex(index).classList.add(className),
     removeClassForElementIndex:
-        (index, className) => this._itemAtIndex(index)._element.classList.remove(className),
-    getAttributeForElementIndex:
-        (index, attr) => this._itemAtIndex(index)._element.getAttribute(attr),
+        (index, className) => this._elementAtIndex(index).classList.remove(className),
+    getAttributeForElementIndex: (index, attr) => this._elementAtIndex(index).getAttribute(attr),
     setAttributeForElementIndex:
-        (index, attr, value) => this._itemAtIndex(index)._element.setAttribute(attr, value),
+        (index, attr, value) => this._elementAtIndex(index).setAttribute(attr, value),
     setTabIndexForListItemChildren:
         (index, value) => this._itemAtIndex(index)._setTabIndexForChildren(Number(value)),
-    getFocusedElementIndex: () => this._indexForElement(this._document?.activeELement),
+    getFocusedElementIndex: () => this._indexForElement(this._document?.activeElement),
     isFocusInsideList: () => this._element.nativeElement.contains(this._document?.activeElement),
     isRootFocused: () => this._element.nativeElement === this._document?.activeElement,
-    focusItemAtIndex: index =>  this._itemAtIndex(index)._element.focus(),
+    focusItemAtIndex: index =>  this._elementAtIndex(index).focus(),
 
     // The following methods have a dummy implementation in the base class because they are only
     // applicable to certain types of lists. They should be implemented for the concrete classes
@@ -167,32 +170,46 @@ export abstract class MatInteractiveListBase extends MatListBase
 
   protected _foundation: MDCListFoundation;
 
-  constructor(protected _element: ElementRef<HTMLElement>,
-                        @Inject(DOCUMENT) protected _document: any) {
+  protected _document: Document;
+
+  private _itemsArr: MatListItemBase[] = [];
+
+  private _subscriptions = new Subscription();
+
+  constructor(protected _element: ElementRef<HTMLElement>, @Inject(DOCUMENT) document: any) {
     super();
+    this._document = document;
     this._isNonInteractive = false;
     this._foundation = new MDCListFoundation(this._adapter);
   }
 
   ngAfterViewInit() {
     this._foundation.init();
-    const first = this._items.toArray()[0]?._element;
+    const first = this._itemAtIndex(0);
     if (first) {
-      first.tabIndex = 0;
+      first._elementRef.nativeElement.tabIndex = 0;
     }
     this._foundation.layout();
+    this._subscriptions.add(
+        this._items.changes.subscribe(() => this._itemsArr = this._items.toArray()));
   }
 
   ngOnDestroy() {
     this._foundation.destroy();
+    this._subscriptions.unsubscribe();
   }
 
   private _itemAtIndex(index: number): MatListItemBase {
-    return this._items.toArray()[index];
+    return this._itemsArr[index];
+  }
+
+  private _elementAtIndex(index: number): HTMLElement {
+    return this._itemAtIndex(index)._elementRef.nativeElement;
   }
 
-  private _indexForElement(element: HTMLElement | null) {
-    return element ? this._items.toArray().findIndex(i => i._element.contains(element)) : -1;
+  private _indexForElement(element: Element | null) {
+    return element ?
+        this._itemsArr.findIndex(i => i._elementRef.nativeElement.contains(element)) : -1;
   }
 }