build: add linting for class member naming (#15812)

Currently we have a convention for prefixing private members with an underscore, however there's nothing verifying it. This comes up occasionally in PRs and there some cases that have deviated from the pattern. These changes add a tslint rule that allows us to customize the naming pattern for the various modifiers.

Author: crisbeto

src/a11y-demo/card/card-a11y.ts

@@ -19,9 +19,9 @@ import {MatSnackBar} from '@angular/material';
 export class CardAccessibilityDemo {
   showProgress: boolean = false;
 
-  constructor(private snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackbar(message: string) {
-    this.snackBar.open(message, '', {duration: 2000});
+    this._snackBar.open(message, '', {duration: 2000});
   }
 }

src/a11y-demo/icon/icon-a11y.ts

@@ -16,9 +16,9 @@ import {MatSnackBar} from '@angular/material';
   templateUrl: 'icon-a11y.html',
 })
 export class IconAccessibilityDemo {
-  constructor(private snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   deleteIcon() {
-    this.snackBar.open('Item deleted', '', {duration: 2000});
+    this._snackBar.open('Item deleted', '', {duration: 2000});
   }
 }

src/a11y-demo/slide-toggle/slide-toggle-a11y.ts

@@ -20,9 +20,9 @@ export class SlideToggleAccessibilityDemo {
   termsToggle = false;
   musicToggle = false;
 
-  constructor(private snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   onFormSubmit() {
-    this.snackBar.open('Terms and condistions accepted!', '', {duration: 2000});
+    this._snackBar.open('Terms and condistions accepted!', '', {duration: 2000});
   }
 }

src/a11y-demo/snack-bar/snack-bar-a11y.ts

@@ -16,13 +16,13 @@ import {MatSnackBar} from '@angular/material';
   templateUrl: 'snack-bar-a11y.html',
 })
 export class SnackBarAccessibilityDemo {
-  constructor(private snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openDiscoPartySnackBar() {
-    this.snackBar.open('Disco party!', 'Dismiss', {duration: 5000});
+    this._snackBar.open('Disco party!', 'Dismiss', {duration: 5000});
   }
 
   openNotificationSnackBar() {
-    this.snackBar.open('Thank you for your support!', '', {duration: 2000});
+    this._snackBar.open('Thank you for your support!', '', {duration: 2000});
   }
 }

src/cdk-experimental/dialog/dialog.ts

@@ -72,9 +72,9 @@ export class Dialog implements OnDestroy {
   _openDialogs: DialogRef<any>[] = [];
 
   constructor(
-      private overlay: Overlay,
-      private injector: Injector,
-      @Inject(DIALOG_REF) private dialogRefConstructor: Type<DialogRef<any>>,
+      private _overlay: Overlay,
+      private _injector: Injector,
+      @Inject(DIALOG_REF) private _dialogRefConstructor: Type<DialogRef<any>>,
       // TODO(crisbeto): the `any` here can be replaced
       // with the proper type once we start using Ivy.
       @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
@@ -114,7 +114,7 @@ export class Dialog implements OnDestroy {
     const dialogRef = this._attachDialogContentForComponent(component, dialogContainer,
       overlayRef, config);
 
-    this.registerDialogRef(dialogRef);
+    this._registerDialogRef(dialogRef);
     return dialogRef;
   }
 
@@ -131,7 +131,7 @@ export class Dialog implements OnDestroy {
     const dialogRef = this._attachDialogContentForTemplate(template, dialogContainer,
       overlayRef, config);
 
-    this.registerDialogRef(dialogRef);
+    this._registerDialogRef(dialogRef);
     return dialogRef;
   }
 
@@ -143,7 +143,7 @@ export class Dialog implements OnDestroy {
   /**
    * Forwards emitting events for when dialogs are opened and all dialogs are closed.
    */
-  private registerDialogRef(dialogRef: DialogRef<any>): void {
+  private _registerDialogRef(dialogRef: DialogRef<any>): void {
     this.openDialogs.push(dialogRef);
 
     const dialogOpenSub = dialogRef.afterOpened().subscribe(() => {
@@ -172,7 +172,7 @@ export class Dialog implements OnDestroy {
    */
   protected _createOverlay(config: DialogConfig): OverlayRef {
     const overlayConfig = new OverlayConfig({
-      positionStrategy: this.overlay.position().global(),
+      positionStrategy: this._overlay.position().global(),
       scrollStrategy: this._scrollStrategy(),
       panelClass: config.panelClass,
       hasBackdrop: config.hasBackdrop,
@@ -186,7 +186,7 @@ export class Dialog implements OnDestroy {
     if (config.backdropClass) {
       overlayConfig.backdropClass = config.backdropClass;
     }
-    return this.overlay.create(overlayConfig);
+    return this._overlay.create(overlayConfig);
   }
 
   /**
@@ -196,9 +196,9 @@ export class Dialog implements OnDestroy {
    * @returns A promise resolving to a ComponentRef for the attached container.
    */
   protected _attachDialogContainer(overlay: OverlayRef, config: DialogConfig): CdkDialogContainer {
-    const container = config.containerComponent || this.injector.get(DIALOG_CONTAINER);
+    const container = config.containerComponent || this._injector.get(DIALOG_CONTAINER);
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    const injector = new PortalInjector(userInjector || this.injector, new WeakMap([
+    const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
       [DialogConfig, config]
     ]));
     const containerPortal = new ComponentPortal(container, config.viewContainerRef, injector);
@@ -226,7 +226,7 @@ export class Dialog implements OnDestroy {
 
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
-    const dialogRef = new this.dialogRefConstructor(overlayRef, dialogContainer, config.id);
+    const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);
     const injector = this._createInjector<T>(config, dialogRef, dialogContainer);
     const contentRef = dialogContainer.attachComponentPortal(
         new ComponentPortal(componentOrTemplateRef, undefined, injector));
@@ -257,7 +257,7 @@ export class Dialog implements OnDestroy {
 
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
-    const dialogRef = new this.dialogRefConstructor(overlayRef, dialogContainer, config.id);
+    const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);
 
     dialogContainer.attachTemplatePortal(
       new TemplatePortal<T>(componentOrTemplateRef, null!,
@@ -284,8 +284,8 @@ export class Dialog implements OnDestroy {
 
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
     const injectionTokens = new WeakMap<any, any>([
-      [this.injector.get(DIALOG_REF), dialogRef],
-      [this.injector.get(DIALOG_CONTAINER), dialogContainer],
+      [this._injector.get(DIALOG_REF), dialogRef],
+      [this._injector.get(DIALOG_CONTAINER), dialogContainer],
       [DIALOG_DATA, config.data]
     ]);
 
@@ -297,15 +297,15 @@ export class Dialog implements OnDestroy {
       });
     }
 
-    return new PortalInjector(userInjector || this.injector, injectionTokens);
+    return new PortalInjector(userInjector || this._injector, injectionTokens);
   }
 
   /**
    * Expands the provided configuration object to include the default values for properties which
    * are undefined.
    */
   private _applyConfigDefaults(config?: DialogConfig): DialogConfig {
-    const dialogConfig = this.injector.get(DIALOG_CONFIG) as typeof DialogConfig;
+    const dialogConfig = this._injector.get(DIALOG_CONFIG) as typeof DialogConfig;
     return {...new dialogConfig(), ...config};
   }
 }

src/cdk/layout/breakpoints-observer.spec.ts

@@ -193,29 +193,29 @@ export class FakeMediaQueryList {
 @Injectable()
 export class FakeMediaMatcher {
   /** A map of match media queries. */
-  private queries = new Map<string, FakeMediaQueryList>();
+  private _queries = new Map<string, FakeMediaQueryList>();
 
   /** The number of distinct queries created in the media matcher during a test. */
   get queryCount(): number {
-    return this.queries.size;
+    return this._queries.size;
   }
 
   /** Fakes the match media response to be controlled in tests. */
   matchMedia(query: string): FakeMediaQueryList {
     const mql = new FakeMediaQueryList(true, query);
-    this.queries.set(query, mql);
+    this._queries.set(query, mql);
     return mql;
   }
 
   /** Clears all queries from the map of queries. */
   clear() {
-    this.queries.clear();
+    this._queries.clear();
   }
 
   /** Toggles the matching state of the provided query. */
   setMatchesQuery(query: string, matches: boolean) {
-    if (this.queries.has(query)) {
-      this.queries.get(query)!.setMatches(matches);
+    if (this._queries.has(query)) {
+      this._queries.get(query)!.setMatches(matches);
     } else {
       throw Error('This query is not being observed.');
     }

src/cdk/layout/breakpoints-observer.ts

@@ -47,7 +47,7 @@ export class BreakpointObserver implements OnDestroy {
   /** A subject for all other observables to takeUntil based on. */
   private _destroySubject = new Subject<void>();
 
-  constructor(private mediaMatcher: MediaMatcher, private zone: NgZone) {}
+  constructor(private _mediaMatcher: MediaMatcher, private _zone: NgZone) {}
 
   /** Completes the active subject, signalling to all other observables to complete. */
   ngOnDestroy() {
@@ -97,7 +97,7 @@ export class BreakpointObserver implements OnDestroy {
       return this._queries.get(query)!;
     }
 
-    const mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
+    const mql: MediaQueryList = this._mediaMatcher.matchMedia(query);
 
     // Create callback for match changes and add it is as a listener.
     const queryObservable = new Observable<MediaQueryList>((observer: Observer<MediaQueryList>) => {
@@ -106,7 +106,7 @@ export class BreakpointObserver implements OnDestroy {
       // webapis-media-query.js file alongside the zone.js file.  Additionally, some browsers do not
       // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
       // patches it.
-      const handler = (e: any) => this.zone.run(() => observer.next(e));
+      const handler = (e: any) => this._zone.run(() => observer.next(e));
       mql.addListener(handler);
 
       return () => {

src/cdk/layout/media-matcher.ts

@@ -20,8 +20,8 @@ export class MediaMatcher {
   /** The internal matchMedia method to return back a MediaQueryList like object. */
   private _matchMedia: (query: string) => MediaQueryList;
 
-  constructor(private platform: Platform) {
-    this._matchMedia = this.platform.isBrowser && window.matchMedia ?
+  constructor(private _platform: Platform) {
+    this._matchMedia = this._platform.isBrowser && window.matchMedia ?
       // matchMedia is bound to the window scope intentionally as it is an illegal invocation to
       // call it from a different scope.
       window.matchMedia.bind(window) :
@@ -35,7 +35,7 @@ export class MediaMatcher {
    * MediaQueryList for the query provided.
    */
   matchMedia(query: string): MediaQueryList {
-    if (this.platform.WEBKIT) {
+    if (this._platform.WEBKIT) {
       createEmptyStyleRule(query);
     }
     return this._matchMedia(query);

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -77,7 +77,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _viewportMargin = 0;
 
   /** The Scrollable containers used to check scrollable view properties on position change. */
-  private scrollables: CdkScrollable[] = [];
+  private _scrollables: CdkScrollable[] = [];
 
   /** Ordered list of preferred positions, from most to least desirable. */
   _preferredPositions: ConnectionPositionPair[] = [];
@@ -366,7 +366,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * Scrollable must be an ancestor element of the strategy's origin element.
    */
   withScrollableContainers(scrollables: CdkScrollable[]): this {
-    this.scrollables = scrollables;
+    this._scrollables = scrollables;
     return this;
   }
 
@@ -994,7 +994,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
     // every time, we should be able to use the scrollTop of the containers if the size of those
     // containers hasn't changed.
-    const scrollContainerBounds = this.scrollables.map(scrollable => {
+    const scrollContainerBounds = this._scrollables.map(scrollable => {
       return scrollable.getElementRef().nativeElement.getBoundingClientRect();
     });
 

src/cdk/table/sticky-styler.ts

@@ -26,16 +26,16 @@ export const STICKY_DIRECTIONS: StickyDirection[] = ['top', 'bottom', 'left', 'r
  */
 export class StickyStyler {
   /**
-   * @param isNativeHtmlTable Whether the sticky logic should be based on a table
+   * @param _isNativeHtmlTable Whether the sticky logic should be based on a table
    *     that uses the native `<table>` element.
-   * @param stickCellCss The CSS class that will be applied to every row/cell that has
+   * @param _stickCellCss The CSS class that will be applied to every row/cell that has
    *     sticky positioning applied.
    * @param direction The directionality context of the table (ltr/rtl); affects column positioning
    *     by reversing left/right positions.
    * @param _isBrowser Whether the table is currently being rendered on the server or the client.
    */
-  constructor(private isNativeHtmlTable: boolean,
-              private stickCellCss: string,
+  constructor(private _isNativeHtmlTable: boolean,
+              private _stickCellCss: string,
               public direction: Direction,
               private _isBrowser = true) { }
 
@@ -129,7 +129,7 @@ export class StickyStyler {
       }
 
       const row = rows[rowIndex];
-      if (this.isNativeHtmlTable) {
+      if (this._isNativeHtmlTable) {
         for (let j = 0; j < row.children.length; j++) {
           const cell = row.children[j] as HTMLElement;
           this._addStickyStyle(cell, position, stickyHeight);
@@ -155,7 +155,7 @@ export class StickyStyler {
    * the tfoot element.
    */
   updateStickyFooterContainer(tableElement: Element, stickyStates: boolean[]) {
-    if (!this.isNativeHtmlTable) {
+    if (!this._isNativeHtmlTable) {
       return;
     }
 
@@ -183,7 +183,7 @@ export class StickyStyler {
     const hasDirection = STICKY_DIRECTIONS.some(dir => !!element.style[dir]);
     if (!hasDirection) {
       element.style.position = '';
-      element.classList.remove(this.stickCellCss);
+      element.classList.remove(this._stickCellCss);
     }
   }
 
@@ -193,7 +193,7 @@ export class StickyStyler {
    * direction and value.
    */
   _addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number) {
-    element.classList.add(this.stickCellCss);
+    element.classList.add(this._stickCellCss);
     element.style[dir] = `${dirValue}px`;
     element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
     element.style.zIndex = this._getCalculatedZIndex(element);