refactor: make all event emitters readonly (#17666)

* refactor(material/core): make all event emitters readonly

* fixup! refactor(material/core): make all event emitters readonly

Co-authored-by: Miles Malerba <[email protected]>

Author: rafaelss95

guides/bidirectionality.md

@@ -31,7 +31,7 @@ export class MyCustomComponent {
     this.dir = directionality.value;
 
     directionality.change.subscribe(() => {
-       this.dir = directionality.value;
+      this.dir = directionality.value;
     });
   }
 }

src/cdk-experimental/dialog/dialog-container.ts

@@ -104,19 +104,19 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
   @ViewChild(CdkPortalOutlet, {static: true}) _portalHost: CdkPortalOutlet;
 
   /** A subject emitting before the dialog enters the view. */
-  _beforeEnter: Subject<void> = new Subject();
+  readonly _beforeEnter = new Subject<void>();
 
   /** A subject emitting after the dialog enters the view. */
-  _afterEnter: Subject<void> = new Subject();
+  readonly _afterEnter = new Subject<void>();
 
   /** A subject emitting before the dialog exits the view. */
-  _beforeExit: Subject<void> = new Subject();
+  readonly _beforeExit = new Subject<void>();
 
   /** A subject emitting after the dialog exits the view. */
-  _afterExit: Subject<void> = new Subject();
+  readonly _afterExit = new Subject<void>();
 
   /** Stream of animation `done` events. */
-  _animationDone = new Subject<AnimationEvent>();
+  readonly _animationDone = new Subject<AnimationEvent>();
 
   constructor(
     private _elementRef: ElementRef<HTMLElement>,

src/cdk-experimental/dialog/dialog.ts

@@ -54,7 +54,7 @@ export class Dialog implements OnDestroy {
   _getAfterAllClosed(): Observable<void> {
     return this._parentDialog ? this._parentDialog.afterAllClosed : this._afterAllClosedBase;
   }
-  _afterAllClosedBase = new Subject<void>();
+  readonly _afterAllClosedBase = new Subject<void>();
 
   // TODO(jelbourn): tighten the type on the right-hand side of this expression.
   afterAllClosed: Observable<void> = defer(() => this.openDialogs.length ?
@@ -64,7 +64,7 @@ export class Dialog implements OnDestroy {
   get afterOpened(): Subject<DialogRef<any>> {
     return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpened;
   }
-  _afterOpened: Subject<DialogRef<any>> = new Subject();
+  readonly _afterOpened = new Subject<DialogRef<any>>();
 
   /** Stream that emits when a dialog is opened. */
   get openDialogs(): DialogRef<any>[] {

src/cdk-experimental/listbox/listbox.ts

@@ -93,7 +93,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
     this._value = value;
   }
 
-  @Output() readonly selectionChange: EventEmitter<OptionSelectionChangeEvent<T>> =
+  @Output() readonly selectionChange =
       new EventEmitter<OptionSelectionChangeEvent<T>>();
 
   constructor(private readonly _elementRef: ElementRef,
@@ -243,7 +243,7 @@ export class CdkListbox<T> implements AfterContentInit, OnDestroy, OnInit, Contr
 
   @ContentChildren(CdkOption, {descendants: true}) _options: QueryList<CdkOption<T>>;
 
-  @Output() readonly selectionChange: EventEmitter<ListboxSelectionChangeEvent<T>> =
+  @Output() readonly selectionChange =
       new EventEmitter<ListboxSelectionChangeEvent<T>>();
 
   @Input() id = `cdk-listbox-${listboxId++}`;

src/cdk-experimental/menu/context-menu.ts

@@ -129,7 +129,7 @@ export class CdkContextMenuTrigger implements OnDestroy {
   private _panelContent: TemplatePortal;
 
   /** Emits when the element is destroyed. */
-  private readonly _destroyed: Subject<void> = new Subject();
+  private readonly _destroyed = new Subject<void>();
 
   /** The menu stack for this trigger and its associated menus. */
   private readonly _menuStack = new MenuStack();

src/cdk-experimental/menu/menu-item-selectable.ts

@@ -20,7 +20,8 @@ let nextId = 0;
 @Directive()
 export abstract class CdkMenuItemSelectable extends CdkMenuItem {
   /** Event emitted when the selectable item is clicked */
-  @Output('cdkMenuItemToggled') toggled: EventEmitter<CdkMenuItemSelectable> = new EventEmitter();
+  @Output('cdkMenuItemToggled') readonly toggled: EventEmitter<CdkMenuItemSelectable> =
+      new EventEmitter();
 
   /** Whether the element is checked */
   @Input()

src/cdk-experimental/menu/menu-item.ts

@@ -70,7 +70,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
    * If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse
    * event.
    */
-  @Output('cdkMenuItemTriggered') triggered: EventEmitter<void> = new EventEmitter();
+  @Output('cdkMenuItemTriggered') readonly triggered: EventEmitter<void> = new EventEmitter();
 
   /**
    * The tabindex for this menu item managed internally and used for implementing roving a
@@ -79,7 +79,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   _tabindex: 0 | -1 = -1;
 
   /** Emits when the menu item is destroyed. */
-  private readonly _destroyed: Subject<void> = new Subject();
+  private readonly _destroyed = new Subject<void>();
 
   constructor(
     readonly _elementRef: ElementRef<HTMLElement>,

src/cdk-experimental/popover-edit/focus-escape-notifier.ts

@@ -22,7 +22,7 @@ export const enum FocusEscapeNotifierDirection {
  * focus leaves the region.
  */
 export class FocusEscapeNotifier extends FocusTrap {
-  private _escapeSubject = new Subject<FocusEscapeNotifierDirection>();
+  private readonly _escapeSubject = new Subject<FocusEscapeNotifierDirection>();
 
   constructor(
       element: HTMLElement,

src/cdk-experimental/popover-edit/lens-directives.ts

@@ -84,7 +84,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostListener('ngSubmit')
   handleFormSubmit(): void {
     if (this.ignoreSubmitUnlessValid && !this.editRef.isValid()) { return; }
@@ -107,7 +107,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostListener('document:click', ['$event'])
   handlePossibleClickOut(evt: Event): void {
     if (closest(evt.target, EDIT_PANE_SELECTOR)) { return; }
@@ -128,7 +128,7 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostListener('keydown', ['$event'])
   _handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && !hasModifierKey(event)) {
@@ -167,7 +167,7 @@ export class CdkEditRevert<FormValue> {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostListener('click')
   revertEdit(): void {
     this.editRef.reset();
@@ -192,10 +192,8 @@ export class CdkEditClose<FormValue> {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
-  @HostListener('click')
-  @HostListener('keydown.enter')
-  @HostListener('keydown.space')
+  // tslint:disable-next-line:no-host-decorator-in-concrete
+  @HostListener('click') @HostListener('keydown.enter') @HostListener('keydown.space')
   closeEdit(): void {
     // Note that we use `click` here, rather than a keyboard event, because some screen readers
     // will emit a fake click event instead of an enter keyboard event on buttons. For the keyboard

src/cdk-experimental/popover-edit/table-directives.ts

@@ -501,7 +501,7 @@ export class CdkEditOpen {
   // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
   // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
   // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
+  // tslint:disable-next-line:no-host-decorator-in-concrete
   @HostListener('click', ['$event'])
   openEdit(evt: Event): void {
     this.editEventDispatcher.editing.next(closest(this.elementRef.nativeElement!, CELL_SELECTOR));

src/cdk-experimental/selection/selection.ts

@@ -60,7 +60,7 @@ export class CdkSelection<T> implements OnInit, AfterContentChecked, CollectionV
   protected _multiple: boolean;
 
   /** Emits when selection changes. */
-  @Output('cdkSelectionChange') change = new EventEmitter<SelectionChange<T>>();
+  @Output('cdkSelectionChange') readonly change = new EventEmitter<SelectionChange<T>>();
 
   /** Latest data provided by the data source. */
   private _data: T[]|readonly T[];

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -71,7 +71,7 @@ export const FOCUS_MONITOR_DEFAULT_OPTIONS =
 
 type MonitoredElementInfo = {
   checkChildren: boolean,
-  subject: Subject<FocusOrigin>,
+  readonly subject: Subject<FocusOrigin>,
   rootNode: HTMLElement|ShadowRoot|Document
 };
 
@@ -604,7 +604,7 @@ function getTarget(event: Event): HTMLElement|null {
 })
 export class CdkMonitorFocus implements AfterViewInit, OnDestroy {
   private _monitorSubscription: Subscription;
-  @Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
+  @Output() readonly cdkFocusChange = new EventEmitter<FocusOrigin>();
 
   constructor(private _elementRef: ElementRef<HTMLElement>, private _focusMonitor: FocusMonitor) {}
 

src/cdk/a11y/key-manager/list-key-manager.ts

@@ -44,7 +44,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
   private _activeItemIndex = -1;
   private _activeItem: T | null = null;
   private _wrap = false;
-  private _letterKeyStream = new Subject<string>();
+  private readonly _letterKeyStream = new Subject<string>();
   private _typeaheadSubscription = Subscription.EMPTY;
   private _vertical = true;
   private _horizontal: 'ltr' | 'rtl' | null;
@@ -82,10 +82,10 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
    * Stream that emits any time the TAB key is pressed, so components can react
    * when focus is shifted off of the list.
    */
-  tabOut: Subject<void> = new Subject<void>();
+  readonly tabOut = new Subject<void>();
 
   /** Stream that emits whenever the active item of the list manager changes. */
-  change = new Subject<number>();
+  readonly change = new Subject<number>();
 
   /**
    * Sets the predicate function that determines which items should be skipped by the

src/cdk/a11y/live-announcer/live-announcer.md

@@ -1,12 +1,12 @@
 ### LiveAnnouncer
 `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
 See [the W3C's WAI-ARIA](https://www.w3.org/TR/wai-aria/states_and_properties#aria-live)
-for more information on aria-live regions. 
+for more information on aria-live regions.
 
 #### Methods
 
 ##### `announce(message: string, politeness?: 'off' | 'polite' | 'assertive'): void`
-Announce the given message via aria-live region. The politeness argument determines the 
+Announce the given message via aria-live region. The politeness argument determines the
 `aria-live` attribute on the announcer element, defaulting to 'polite'.
 
 #### Examples
@@ -18,9 +18,8 @@ The LiveAnnouncer is injected into a component:
 })
 export class MyComponent {
 
- constructor(liveAnnouncer: LiveAnnouncer) {
-   liveAnnouncer.announce("Hey Google");
- }
-
+  constructor(liveAnnouncer: LiveAnnouncer) {
+    liveAnnouncer.announce("Hey Google");
+  }
 }
 ```

src/cdk/accordion/accordion-item.ts

@@ -42,18 +42,18 @@ export class CdkAccordionItem implements OnDestroy {
   /** Subscription to openAll/closeAll events. */
   private _openCloseAllSubscription = Subscription.EMPTY;
   /** Event emitted every time the AccordionItem is closed. */
-  @Output() closed: EventEmitter<void> = new EventEmitter<void>();
+  @Output() readonly closed: EventEmitter<void> = new EventEmitter<void>();
   /** Event emitted every time the AccordionItem is opened. */
-  @Output() opened: EventEmitter<void> = new EventEmitter<void>();
+  @Output() readonly opened: EventEmitter<void> = new EventEmitter<void>();
   /** Event emitted when the AccordionItem is destroyed. */
-  @Output() destroyed: EventEmitter<void> = new EventEmitter<void>();
+  @Output() readonly destroyed: EventEmitter<void> = new EventEmitter<void>();
 
   /**
    * Emits whenever the expanded state of the accordion changes.
    * Primarily used to facilitate two-way binding.
    * @docs-private
    */
-  @Output() expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() readonly expandedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /** The unique AccordionItem id. */
   readonly id: string = `cdk-accordion-child-${nextId++}`;

src/cdk/bidi/dir.ts

@@ -40,7 +40,7 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy {
   _rawDir: string;
 
   /** Event emitted when the direction changes. */
-  @Output('dirChange') change = new EventEmitter<Direction>();
+  @Output('dirChange') readonly change = new EventEmitter<Direction>();
 
   /** @docs-private */
   @Input()

src/cdk/clipboard/copy-to-clipboard.ts

@@ -60,7 +60,7 @@ export class CdkCopyToClipboard implements OnDestroy {
    * Emits when some text is copied to the clipboard. The
    * emitted value indicates whether copying was successful.
    */
-  @Output('cdkCopyToClipboardCopied') copied = new EventEmitter<boolean>();
+  @Output('cdkCopyToClipboardCopied') readonly copied = new EventEmitter<boolean>();
 
   /** Copies that are currently being attempted. */
   private _pending = new Set<PendingCopy>();

src/cdk/collections/selection-model.ts

@@ -34,7 +34,7 @@ export class SelectionModel<T> {
   }
 
   /** Event emitted when the value has changed. */
-  changed: Subject<SelectionChange<T>> = new Subject();
+  readonly changed = new Subject<SelectionChange<T>>();
 
   constructor(
     private _multiple = false,

src/cdk/drag-drop/directives/drag-handle.ts

@@ -41,7 +41,7 @@ export class CdkDragHandle implements OnDestroy {
   _parentDrag: {} | undefined;
 
   /** Emits when the state of the handle has changed. */
-  _stateChanges = new Subject<CdkDragHandle>();
+  readonly _stateChanges = new Subject<CdkDragHandle>();
 
   /** Whether starting to drag through this handle is disabled. */
   @Input('cdkDragHandleDisabled')

src/cdk/drag-drop/directives/drag.ts

@@ -70,7 +70,7 @@ const DRAG_HOST_CLASS = 'cdk-drag';
   providers: [{provide: CDK_DRAG_PARENT, useExisting: CdkDrag}]
 })
 export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
-  private _destroyed = new Subject<void>();
+  private readonly _destroyed = new Subject<void>();
   private static _dragInstances: CdkDrag[] = [];
 
   /** Reference to the underlying drag instance. */
@@ -156,32 +156,34 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   @Input('cdkDragPreviewContainer') previewContainer: PreviewContainer;
 
   /** Emits when the user starts dragging the item. */
-  @Output('cdkDragStarted') started: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();
+  @Output('cdkDragStarted') readonly started: EventEmitter<CdkDragStart> =
+      new EventEmitter<CdkDragStart>();
 
   /** Emits when the user has released a drag item, before any animations have started. */
-  @Output('cdkDragReleased') released: EventEmitter<CdkDragRelease> =
+  @Output('cdkDragReleased') readonly released: EventEmitter<CdkDragRelease> =
       new EventEmitter<CdkDragRelease>();
 
   /** Emits when the user stops dragging an item in the container. */
-  @Output('cdkDragEnded') ended: EventEmitter<CdkDragEnd> = new EventEmitter<CdkDragEnd>();
+  @Output('cdkDragEnded') readonly ended: EventEmitter<CdkDragEnd> = new EventEmitter<CdkDragEnd>();
 
   /** Emits when the user has moved the item into a new container. */
-  @Output('cdkDragEntered') entered: EventEmitter<CdkDragEnter<any>> =
+  @Output('cdkDragEntered') readonly entered: EventEmitter<CdkDragEnter<any>> =
       new EventEmitter<CdkDragEnter<any>>();
 
   /** Emits when the user removes the item its container by dragging it into another container. */
-  @Output('cdkDragExited') exited: EventEmitter<CdkDragExit<any>> =
+  @Output('cdkDragExited') readonly exited: EventEmitter<CdkDragExit<any>> =
       new EventEmitter<CdkDragExit<any>>();
 
   /** Emits when the user drops the item inside a container. */
-  @Output('cdkDragDropped') dropped: EventEmitter<CdkDragDrop<any>> =
+  @Output('cdkDragDropped') readonly dropped: EventEmitter<CdkDragDrop<any>> =
       new EventEmitter<CdkDragDrop<any>>();
 
   /**
    * Emits as the user is dragging the item. Use with caution,
    * because this event will fire for every pixel that the user has dragged.
    */
-  @Output('cdkDragMoved') moved: Observable<CdkDragMove<T>> =
+  @Output('cdkDragMoved')
+  readonly moved:  Observable<CdkDragMove<T>> =
       new Observable((observer: Observer<CdkDragMove<T>>) => {
         const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
           source: this,

src/cdk/drag-drop/directives/drop-list.ts

@@ -75,7 +75,7 @@ export const CDK_DROP_LIST = new InjectionToken<CdkDropList>('CdkDropList');
 })
 export class CdkDropList<T = any> implements OnDestroy {
   /** Emits when the list has been destroyed. */
-  private _destroyed = new Subject<void>();
+  private readonly _destroyed = new Subject<void>();
 
   /** Whether the element's scrollable parents have been resolved. */
   private _scrollableParentsResolved: boolean;
@@ -148,24 +148,24 @@ export class CdkDropList<T = any> implements OnDestroy {
 
   /** Emits when the user drops an item inside the container. */
   @Output('cdkDropListDropped')
-  dropped: EventEmitter<CdkDragDrop<T, any>> = new EventEmitter<CdkDragDrop<T, any>>();
+  readonly dropped: EventEmitter<CdkDragDrop<T, any>> = new EventEmitter<CdkDragDrop<T, any>>();
 
   /**
    * Emits when the user has moved a new drag item into this container.
    */
   @Output('cdkDropListEntered')
-  entered: EventEmitter<CdkDragEnter<T>> = new EventEmitter<CdkDragEnter<T>>();
+  readonly entered: EventEmitter<CdkDragEnter<T>> = new EventEmitter<CdkDragEnter<T>>();
 
   /**
    * Emits when the user removes an item from the container
    * by dragging it into another container.
    */
   @Output('cdkDropListExited')
-  exited: EventEmitter<CdkDragExit<T>> = new EventEmitter<CdkDragExit<T>>();
+  readonly exited: EventEmitter<CdkDragExit<T>> = new EventEmitter<CdkDragExit<T>>();
 
   /** Emits as the user is swapping items while actively dragging. */
   @Output('cdkDropListSorted')
-  sorted: EventEmitter<CdkDragSortEvent<T>> = new EventEmitter<CdkDragSortEvent<T>>();
+  readonly sorted: EventEmitter<CdkDragSortEvent<T>> = new EventEmitter<CdkDragSortEvent<T>>();
 
   /**
    * Keeps track of the items that are registered with this container. Historically we used to