From 8d57b163aa544b52c8df39524508c9e717f82fe1 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 4 Apr 2019 21:11:57 +0200 Subject: [PATCH] refactor: explicitly set static flag on all queries Explicitly marks all `ViewChild` and `ContentChild` queries so that the timing is consistent for apps using Ivy or ViewEngine. --- src/a11y-demo/a11y-demo.ts | 4 +- src/a11y-demo/table/table-a11y.ts | 4 +- src/cdk-experimental/dialog/dialog.spec.ts | 6 +- .../scrolling/virtual-scroll-viewport.spec.ts | 2 +- .../aria-describer/aria-describer.spec.ts | 8 +-- src/cdk/a11y/focus-trap/focus-trap.spec.ts | 14 ++-- src/cdk/bidi/directionality.spec.ts | 6 +- src/cdk/drag-drop/directives/drag.spec.ts | 48 +++++++------- src/cdk/drag-drop/directives/drag.ts | 4 +- src/cdk/observers/observe-content.spec.ts | 2 +- src/cdk/overlay/overlay-directives.spec.ts | 10 +-- src/cdk/overlay/overlay.spec.ts | 2 +- src/cdk/scrolling/scroll-dispatcher.spec.ts | 6 +- src/cdk/scrolling/scrollable.spec.ts | 12 ++-- src/cdk/stepper/stepper.ts | 2 +- src/cdk/table/cell.ts | 6 +- src/cdk/table/table.spec.ts | 32 +++++----- src/cdk/text-field/autofill.spec.ts | 2 +- src/cdk/text-field/autosize.spec.ts | 2 +- src/cdk/tree/tree.spec.ts | 32 +++++----- src/dev-app/autocomplete/autocomplete-demo.ts | 2 +- src/dev-app/bottom-sheet/bottom-sheet-demo.ts | 2 +- .../connected-overlay-demo.ts | 4 +- src/dev-app/datepicker/datepicker-demo.ts | 2 +- src/dev-app/dialog/dialog-demo.ts | 2 +- src/dev-app/expansion/expansion-demo.ts | 2 +- src/dev-app/ripple/ripple-demo.ts | 2 +- src/dev-app/snack-bar/snack-bar-demo.ts | 2 +- src/e2e-app/dialog/dialog-e2e.ts | 2 +- src/lib/autocomplete/autocomplete.spec.ts | 22 +++---- src/lib/bottom-sheet/bottom-sheet.spec.ts | 6 +- src/lib/button-toggle/button-toggle.spec.ts | 2 +- src/lib/button-toggle/button-toggle.ts | 2 +- src/lib/button/button.ts | 2 +- src/lib/checkbox/checkbox.spec.ts | 2 +- src/lib/checkbox/checkbox.ts | 4 +- src/lib/chips/chip-input.spec.ts | 2 +- src/lib/chips/chip-list.spec.ts | 8 +-- src/lib/chips/chip.spec.ts | 2 +- src/lib/chips/chip.ts | 6 +- src/lib/core/ripple/ripple.spec.ts | 6 +- src/lib/datepicker/calendar.ts | 6 +- src/lib/datepicker/datepicker-toggle.ts | 4 +- src/lib/datepicker/datepicker.spec.ts | 58 ++++++++--------- src/lib/datepicker/datepicker.ts | 2 +- src/lib/datepicker/month-view.ts | 2 +- src/lib/datepicker/multi-year-view.spec.ts | 2 +- src/lib/datepicker/multi-year-view.ts | 2 +- src/lib/datepicker/year-view.spec.ts | 2 +- src/lib/datepicker/year-view.ts | 2 +- src/lib/dialog/dialog.spec.ts | 10 ++- src/lib/expansion/accordion.spec.ts | 6 +- src/lib/expansion/expansion-panel.ts | 4 +- src/lib/expansion/expansion.spec.ts | 4 +- src/lib/grid-list/grid-list.spec.ts | 2 +- src/lib/input/input.spec.ts | 10 +-- src/lib/list/list.ts | 4 +- src/lib/list/selection-list.ts | 6 +- src/lib/menu/menu-directive.ts | 4 +- src/lib/menu/menu.spec.ts | 64 +++++++++---------- src/lib/paginator/paginator.spec.ts | 10 +-- src/lib/progress-bar/progress-bar.ts | 2 +- src/lib/radio/radio.spec.ts | 2 +- src/lib/radio/radio.ts | 2 +- src/lib/select/select.spec.ts | 36 +++++------ src/lib/select/select.ts | 8 +-- src/lib/sidenav/drawer.spec.ts | 20 +++--- src/lib/sidenav/drawer.ts | 4 +- src/lib/sidenav/sidenav.ts | 2 +- src/lib/slide-toggle/slide-toggle.ts | 6 +- src/lib/slider/slider.spec.ts | 6 +- src/lib/slider/slider.ts | 2 +- src/lib/snack-bar/snack-bar.spec.ts | 6 +- src/lib/sort/sort.spec.ts | 14 ++-- src/lib/stepper/stepper.ts | 2 +- src/lib/table/table.spec.ts | 4 +- src/lib/tabs/tab-body.spec.ts | 4 +- src/lib/tabs/tab-body.ts | 2 +- src/lib/tabs/tab-group.spec.ts | 2 +- src/lib/tabs/tab-group.ts | 4 +- src/lib/tabs/tab-header.ts | 4 +- src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 2 +- src/lib/tabs/tab.ts | 2 +- src/lib/tooltip/tooltip.spec.ts | 16 ++--- src/lib/tree/tree.spec.ts | 12 ++-- .../cdk-drag-drop-root-element-example.ts | 2 +- .../cdk-portal-overview-example.ts | 2 +- .../chips-autocomplete-example.ts | 4 +- .../expansion-expand-collapse-all-example.ts | 2 +- .../focus-monitor-focus-via-example.ts | 2 +- .../focus-monitor-overview-example.ts | 4 +- .../sidenav-disable-close-example.ts | 2 +- .../table-http/table-http-example.ts | 4 +- .../table-simple-column-example.ts | 2 +- .../text-field-autofill-monitor-example.ts | 4 +- .../text-field-autosize-textarea-example.ts | 2 +- 96 files changed, 348 insertions(+), 338 deletions(-) diff --git a/src/a11y-demo/a11y-demo.ts b/src/a11y-demo/a11y-demo.ts index 8797fc221e2f..3cc25e84b78f 100644 --- a/src/a11y-demo/a11y-demo.ts +++ b/src/a11y-demo/a11y-demo.ts @@ -21,8 +21,8 @@ export class AccessibilityDemoRoot implements OnDestroy { private _routerSubscription = Subscription.EMPTY; - @ViewChild('maincontent') mainContent: ElementRef; - @ViewChild('header') sectionHeader: ElementRef; + @ViewChild('maincontent', {static: false}) mainContent: ElementRef; + @ViewChild('header', {static: false}) sectionHeader: ElementRef; navItems = [ {name: 'Home', route: '.'}, diff --git a/src/a11y-demo/table/table-a11y.ts b/src/a11y-demo/table/table-a11y.ts index 3ede5adfbeca..e8ece2ea9def 100644 --- a/src/a11y-demo/table/table-a11y.ts +++ b/src/a11y-demo/table/table-a11y.ts @@ -35,8 +35,8 @@ const exampleData = [ styleUrls: ['table-a11y.css'], }) export class TableAccessibilityDemo implements OnInit { - @ViewChild(MatSort) sort: MatSort; - @ViewChild(MatPaginator) pager: MatPaginator; + @ViewChild(MatSort, {static: true}) sort: MatSort; + @ViewChild(MatPaginator, {static: true}) pager: MatPaginator; displayedColumns = ['name', 'color', 'age']; basicDataSource: BasicDataSource; diff --git a/src/cdk-experimental/dialog/dialog.spec.ts b/src/cdk-experimental/dialog/dialog.spec.ts index 3b0b654f35c3..d95ad46cfec0 100644 --- a/src/cdk-experimental/dialog/dialog.spec.ts +++ b/src/cdk-experimental/dialog/dialog.spec.ts @@ -1079,7 +1079,9 @@ class ComponentWithOnPushViewContainer { template: ``, }) class ComponentWithChildViewContainer { - @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer; + @ViewChild(DirectiveWithViewContainer, { + static: false + }) childWithViewContainer: DirectiveWithViewContainer; get childViewContainer() { return this.childWithViewContainer.viewContainerRef; @@ -1095,7 +1097,7 @@ class ComponentWithTemplateRef { localValue: string; dialogRef: DialogRef; - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; setDialogRef(dialogRef: DialogRef): string { this.dialogRef = dialogRef; diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts index 4dab8a2a9b9e..2b3e13f6607c 100644 --- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts +++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts @@ -91,7 +91,7 @@ function finishInit(fixture: ComponentFixture) { encapsulation: ViewEncapsulation.None, }) class AutoSizeVirtualScroll { - @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport; + @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport; @Input() orientation = 'vertical'; @Input() viewportSize = 200; diff --git a/src/cdk/a11y/aria-describer/aria-describer.spec.ts b/src/cdk/a11y/aria-describer/aria-describer.spec.ts index cec3d189d63f..66d4e08af3e5 100644 --- a/src/cdk/a11y/aria-describer/aria-describer.spec.ts +++ b/src/cdk/a11y/aria-describer/aria-describer.spec.ts @@ -189,16 +189,16 @@ function expectMessage(el: Element, message: string) { `, }) class TestApp { - @ViewChild('element1') _element1: ElementRef; + @ViewChild('element1', {static: false}) _element1: ElementRef; get element1(): Element { return this._element1.nativeElement; } - @ViewChild('element2') _element2: ElementRef; + @ViewChild('element2', {static: false}) _element2: ElementRef; get element2(): Element { return this._element2.nativeElement; } - @ViewChild('element3') _element3: ElementRef; + @ViewChild('element3', {static: false}) _element3: ElementRef; get element3(): Element { return this._element3.nativeElement; } - @ViewChild('element4') _element4: ElementRef; + @ViewChild('element4', {static: false}) _element4: ElementRef; get element4(): Element { return this._element4.nativeElement; } diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts index fbecb2d847d1..076ada54b0bb 100644 --- a/src/cdk/a11y/focus-trap/focus-trap.spec.ts +++ b/src/cdk/a11y/focus-trap/focus-trap.spec.ts @@ -199,7 +199,7 @@ describe('FocusTrap', () => { ` }) class SimpleFocusTrap { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; } @Component({ @@ -212,7 +212,7 @@ class SimpleFocusTrap { ` }) class FocusTrapWithAutoCapture { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; showTrappedRegion = false; } @@ -226,7 +226,7 @@ class FocusTrapWithAutoCapture { ` }) class FocusTrapWithBindings { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; renderFocusTrap = true; _isFocusTrapEnabled = true; } @@ -246,7 +246,7 @@ class FocusTrapWithBindings { ` }) class FocusTrapTargets { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; } @Component({ @@ -257,7 +257,7 @@ class FocusTrapTargets { ` }) class FocusTrapUnfocusableTarget { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; } @Component({ @@ -270,7 +270,7 @@ class FocusTrapUnfocusableTarget { ` }) class FocusTrapWithSvg { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; } @Component({ @@ -281,5 +281,5 @@ class FocusTrapWithSvg { ` }) class FocusTrapWithoutFocusableElements { - @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus; + @ViewChild(CdkTrapFocus, {static: false}) focusTrapDirective: CdkTrapFocus; } diff --git a/src/cdk/bidi/directionality.spec.ts b/src/cdk/bidi/directionality.spec.ts index 9a3c25b66928..adb433c8eb0f 100644 --- a/src/cdk/bidi/directionality.spec.ts +++ b/src/cdk/bidi/directionality.spec.ts @@ -158,7 +158,7 @@ describe('Directionality', () => { ` }) class ElementWithDir { - @ViewChild(Dir) dir: Dir; + @ViewChild(Dir, {static: false}) dir: Dir; direction = 'rtl'; changeCount = 0; } @@ -167,14 +167,14 @@ class ElementWithDir { template: '
' }) class ElementWithPredefinedAutoDir { - @ViewChild(Dir) dir: Dir; + @ViewChild(Dir, {static: false}) dir: Dir; } @Component({ template: '
' }) class ElementWithPredefinedUppercaseDir { - @ViewChild(Dir) dir: Dir; + @ViewChild(Dir, {static: false}) dir: Dir; } diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index 091a53d003bd..9d4b10561ad2 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -3196,8 +3196,8 @@ describe('CdkDrag', () => { ` }) class StandaloneDraggable { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild(CdkDrag) dragInstance: CdkDrag; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag; startedSpy = jasmine.createSpy('started spy'); endedSpy = jasmine.createSpy('ended spy'); releasedSpy = jasmine.createSpy('released spy'); @@ -3213,8 +3213,8 @@ class StandaloneDraggable { ` }) class StandaloneDraggableWithOnPush { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild(CdkDrag) dragInstance: CdkDrag; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag; } @Component({ @@ -3227,7 +3227,7 @@ class StandaloneDraggableWithOnPush { ` }) class StandaloneDraggableSvg { - @ViewChild('dragElement') dragElement: ElementRef; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; } @Component({ @@ -3239,10 +3239,10 @@ class StandaloneDraggableSvg { ` }) class StandaloneDraggableWithHandle { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild('handleElement') handleElement: ElementRef; - @ViewChild(CdkDrag) dragInstance: CdkDrag; - @ViewChild(CdkDragHandle) handleInstance: CdkDragHandle; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild('handleElement', {static: false}) handleElement: ElementRef; + @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag; + @ViewChild(CdkDragHandle, {static: false}) handleInstance: CdkDragHandle; } @Component({ @@ -3257,8 +3257,8 @@ class StandaloneDraggableWithHandle { ` }) class StandaloneDraggableWithDelayedHandle { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild('handleElement') handleElement: ElementRef; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild('handleElement', {static: false}) handleElement: ElementRef; showHandle = false; } @@ -3277,8 +3277,8 @@ class StandaloneDraggableWithDelayedHandle { ` }) class StandaloneDraggableWithIndirectHandle { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild('handleElement') handleElement: ElementRef; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild('handleElement', {static: false}) handleElement: ElementRef; } @@ -3302,7 +3302,7 @@ class StandaloneDraggableWithIndirectHandle { ` }) class StandaloneDraggableWithMultipleHandles { - @ViewChild('dragElement') dragElement: ElementRef; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; @ViewChildren(CdkDragHandle) handles: QueryList; } @@ -3328,7 +3328,7 @@ const DROP_ZONE_FIXTURE_TEMPLATE = ` @Component({template: DROP_ZONE_FIXTURE_TEMPLATE}) class DraggableInDropZone { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChild(CdkDropList) dropInstance: CdkDropList; + @ViewChild(CdkDropList, {static: false}) dropInstance: CdkDropList; items = [ {value: 'Zero', height: ITEM_HEIGHT, margin: 0}, {value: 'One', height: ITEM_HEIGHT, margin: 0}, @@ -3384,7 +3384,7 @@ class DraggableInOnPushDropZone extends DraggableInDropZone {} }) class DraggableInHorizontalDropZone { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChild(CdkDropList) dropInstance: CdkDropList; + @ViewChild(CdkDropList, {static: false}) dropInstance: CdkDropList; items = [ {value: 'Zero', width: ITEM_WIDTH, margin: 0}, {value: 'One', width: ITEM_WIDTH, margin: 0}, @@ -3418,7 +3418,7 @@ class DraggableInHorizontalDropZone { ` }) class DraggableInDropZoneWithCustomPreview { - @ViewChild(CdkDropList) dropInstance: CdkDropList; + @ViewChild(CdkDropList, {static: false}) dropInstance: CdkDropList; @ViewChildren(CdkDrag) dragItems: QueryList; items = ['Zero', 'One', 'Two', 'Three']; boundarySelector: string; @@ -3563,9 +3563,9 @@ class ConnectedDropZonesViaGroupDirective extends ConnectedDropZones { ` }) class DraggableWithAlternateRoot { - @ViewChild('dragElement') dragElement: ElementRef; - @ViewChild('dragRoot') dragRoot: ElementRef; - @ViewChild(CdkDrag) dragInstance: CdkDrag; + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild('dragRoot', {static: false}) dragRoot: ElementRef; + @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag; rootElementSelector: string; } @@ -3624,9 +3624,9 @@ class ConnectedDropZonesWithSingleItems { ` }) class NestedDropListGroups { - @ViewChild('group') group: CdkDropListGroup; - @ViewChild('listOne') listOne: CdkDropList; - @ViewChild('listTwo') listTwo: CdkDropList; + @ViewChild('group', {static: false}) group: CdkDropListGroup; + @ViewChild('listOne', {static: false}) listOne: CdkDropList; + @ViewChild('listTwo', {static: false}) listTwo: CdkDropList; } @@ -3651,7 +3651,7 @@ class DraggableOnNgContainer {} }) class DraggableInDropZoneWithoutEvents { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChild(CdkDropList) dropInstance: CdkDropList; + @ViewChild(CdkDropList, {static: false}) dropInstance: CdkDropList; items = [ {value: 'Zero', height: ITEM_HEIGHT}, {value: 'One', height: ITEM_HEIGHT}, diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index 239f5e8043d3..f562a52e45d6 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -85,10 +85,10 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { @ContentChildren(CdkDragHandle, {descendants: true}) _handles: QueryList; /** Element that will be used as a template to create the draggable item's preview. */ - @ContentChild(CdkDragPreview) _previewTemplate: CdkDragPreview; + @ContentChild(CdkDragPreview, {static: false}) _previewTemplate: CdkDragPreview; /** Template for placeholder element rendered to show where a draggable would be dropped. */ - @ContentChild(CdkDragPlaceholder) _placeholderTemplate: CdkDragPlaceholder; + @ContentChild(CdkDragPlaceholder, {static: false}) _placeholderTemplate: CdkDragPlaceholder; /** Arbitrary data to attach to this drag instance. */ @Input('cdkDragData') data: T; diff --git a/src/cdk/observers/observe-content.spec.ts b/src/cdk/observers/observe-content.spec.ts index ba9137f1cb76..e6d015b245cc 100644 --- a/src/cdk/observers/observe-content.spec.ts +++ b/src/cdk/observers/observe-content.spec.ts @@ -228,6 +228,6 @@ class ComponentWithDebouncedListener { template: `
{{text}}
` }) class UnobservedComponentWithTextContent { - @ViewChild('contentEl') contentEl: ElementRef; + @ViewChild('contentEl', {static: false}) contentEl: ElementRef; text = ''; } diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index d57a516f6066..49fe0a3bd0bc 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -539,9 +539,9 @@ describe('Overlay directives', () => { `, }) class ConnectedOverlayDirectiveTest { - @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay; - @ViewChild('trigger') trigger: CdkOverlayOrigin; - @ViewChild('otherTrigger') otherTrigger: CdkOverlayOrigin; + @ViewChild(CdkConnectedOverlay, {static: false}) connectedOverlayDirective: CdkConnectedOverlay; + @ViewChild('trigger', {static: false}) trigger: CdkOverlayOrigin; + @ViewChild('otherTrigger', {static: false}) otherTrigger: CdkOverlayOrigin; isOpen = false; width: number | string; @@ -574,6 +574,6 @@ class ConnectedOverlayDirectiveTest { Menu content`, }) class ConnectedOverlayPropertyInitOrder { - @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay; - @ViewChild('trigger') trigger: CdkOverlayOrigin; + @ViewChild(CdkConnectedOverlay, {static: false}) connectedOverlayDirective: CdkConnectedOverlay; + @ViewChild('trigger', {static: false}) trigger: CdkOverlayOrigin; } diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index 8ab3b2224f7e..7e6e36b77f21 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -948,7 +948,7 @@ class PizzaMsg { } /** Test-bed component that contains a TempatePortal and an ElementRef. */ @Component({template: `Cake`}) class TestComponentWithTemplatePortals { - @ViewChild(CdkPortal) templatePortal: CdkPortal; + @ViewChild(CdkPortal, {static: false}) templatePortal: CdkPortal; constructor(public viewContainerRef: ViewContainerRef) { } } diff --git a/src/cdk/scrolling/scroll-dispatcher.spec.ts b/src/cdk/scrolling/scroll-dispatcher.spec.ts index 5ba121a294d9..1a6158fe15d0 100644 --- a/src/cdk/scrolling/scroll-dispatcher.spec.ts +++ b/src/cdk/scrolling/scroll-dispatcher.spec.ts @@ -244,8 +244,8 @@ describe('ScrollDispatcher', () => { template: `
` }) class ScrollingComponent { - @ViewChild(CdkScrollable) scrollable: CdkScrollable; - @ViewChild('scrollingElement') scrollingElement: ElementRef; + @ViewChild(CdkScrollable, {static: false}) scrollable: CdkScrollable; + @ViewChild('scrollingElement', {static: false}) scrollingElement: ElementRef; } @@ -262,7 +262,7 @@ class ScrollingComponent { ` }) class NestedScrollingComponent { - @ViewChild('interestingElement') interestingElement: ElementRef; + @ViewChild('interestingElement', {static: false}) interestingElement: ElementRef; } const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent]; diff --git a/src/cdk/scrolling/scrollable.spec.ts b/src/cdk/scrolling/scrollable.spec.ts index 6839f24dc83f..2199e2db0bb9 100644 --- a/src/cdk/scrolling/scrollable.spec.ts +++ b/src/cdk/scrolling/scrollable.spec.ts @@ -241,10 +241,10 @@ describe('CdkScrollable', () => { }) class ScrollableViewport { @Input() dir: Direction; - @ViewChild(CdkScrollable) scrollable: CdkScrollable; - @ViewChild('scrollContainer') scrollContainer: ElementRef; - @ViewChild('firstRowStart') firstRowStart: ElementRef; - @ViewChild('firstRowEnd') firstRowEnd: ElementRef; - @ViewChild('lastRowStart') lastRowStart: ElementRef; - @ViewChild('lastRowEnd') lastRowEnd: ElementRef; + @ViewChild(CdkScrollable, {static: false}) scrollable: CdkScrollable; + @ViewChild('scrollContainer', {static: false}) scrollContainer: ElementRef; + @ViewChild('firstRowStart', {static: false}) firstRowStart: ElementRef; + @ViewChild('firstRowEnd', {static: false}) firstRowEnd: ElementRef; + @ViewChild('lastRowStart', {static: false}) lastRowStart: ElementRef; + @ViewChild('lastRowEnd', {static: false}) lastRowEnd: ElementRef; } diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 862a30a93044..655b7bfd22c5 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -118,7 +118,7 @@ export class CdkStep implements OnChanges { _displayDefaultIndicatorType: boolean; /** Template for step label if it exists. */ - @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel; + @ContentChild(CdkStepLabel, {static: false}) stepLabel: CdkStepLabel; /** Template for step content. */ @ViewChild(TemplateRef, {static: true}) content: TemplateRef; diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index 54f366aaa0df..4b58def8a1f1 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -90,13 +90,13 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick { _stickyEnd: boolean = false; /** @docs-private */ - @ContentChild(CdkCellDef) cell: CdkCellDef; + @ContentChild(CdkCellDef, {static: false}) cell: CdkCellDef; /** @docs-private */ - @ContentChild(CdkHeaderCellDef) headerCell: CdkHeaderCellDef; + @ContentChild(CdkHeaderCellDef, {static: false}) headerCell: CdkHeaderCellDef; /** @docs-private */ - @ContentChild(CdkFooterCellDef) footerCell: CdkFooterCellDef; + @ContentChild(CdkFooterCellDef, {static: false}) footerCell: CdkFooterCellDef; /** * Transformed version of the column name that can be used as part of a CSS classname. Excludes diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 73da7c40063e..04f2da372bb2 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -1454,7 +1454,7 @@ class SimpleCdkTableApp { dataSource: FakeDataSource | undefined = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1484,7 +1484,7 @@ class CdkTableWithDifferentDataInputsApp { dataSource: DataSource | Observable | TestData[] | any = null; columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1615,7 +1615,7 @@ class WhenRowCdkTableApp { this.dataSource.addData(); } - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; showIndexColumns() { const indexColumns = ['index', 'dataIndex', 'renderIndex']; @@ -1665,7 +1665,7 @@ class WhenRowWithoutDefaultCdkTableApp { isIndex1 = (index: number, _rowData: TestData) => index == 1; hasC3 = (_index: number, rowData: TestData) => rowData.c == 'c_3'; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1708,7 +1708,7 @@ class WhenRowMultipleDefaultsCdkTableApp { columnsToRender = ['column_a', 'column_b', 'column_c']; hasC3 = (_index: number, rowData: TestData) => rowData.c == 'c_3'; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1728,7 +1728,7 @@ class DynamicDataSourceCdkTableApp { dataSource: FakeDataSource | undefined; columnsToRender = ['column_a']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1755,7 +1755,7 @@ class TrackByCdkTableApp { dataSource: FakeDataSource = new FakeDataSource(); columnsToRender = ['column_a', 'column_b']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; trackBy = (index: number, item: TestData) => { switch (this.trackByStrategy) { @@ -1805,7 +1805,7 @@ class StickyFlexLayoutCdkTableApp { dataSource: FakeDataSource = new FakeDataSource(); columns = ['column-1', 'column-2', 'column-3', 'column-4', 'column-5', 'column-6']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; dir = 'ltr'; stickyHeaders: string[] = []; @@ -1858,7 +1858,7 @@ class StickyNativeLayoutCdkTableApp { dataSource: FakeDataSource = new FakeDataSource(); columns = ['column-1', 'column-2', 'column-3', 'column-4', 'column-5', 'column-6']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; stickyHeaders: string[] = []; stickyFooters: string[] = []; @@ -1887,7 +1887,7 @@ class DynamicColumnDefinitionsCdkTableApp { dynamicColumns: any[] = []; dataSource: FakeDataSource = new FakeDataSource(); - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1907,7 +1907,7 @@ class CustomRoleCdkTableApp { dataSource: FakeDataSource = new FakeDataSource(); columnsToRender = ['column_a']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -1927,7 +1927,7 @@ class CrazyColumnNameCdkTableApp { dataSource: FakeDataSource = new FakeDataSource(); columnsToRender = ['crazy-column-NAME-1!@#$%^-_&*()2']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -2134,7 +2134,7 @@ class RowContextCdkTableApp { }) class WrapperCdkTableApp implements AfterContentInit { @ContentChildren(CdkColumnDef) columnDefs: QueryList; - @ContentChild(CdkHeaderRowDef) headerRowDef: CdkHeaderRowDef; + @ContentChild(CdkHeaderRowDef, {static: false}) headerRowDef: CdkHeaderRowDef; @ContentChildren(CdkRowDef) rowDefs: QueryList>; @ViewChild(CdkTable, {static: true}) table: CdkTable; @@ -2208,7 +2208,7 @@ class NativeHtmlTableApp { dataSource: FakeDataSource | undefined = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -2237,7 +2237,7 @@ class NativeTableWithNoHeaderOrFooterRows { dataSource: FakeDataSource | undefined = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } @Component({ @@ -2258,7 +2258,7 @@ class NativeHtmlTableWithCaptionApp { dataSource: FakeDataSource | undefined = new FakeDataSource(); columnsToRender = ['column_a']; - @ViewChild(CdkTable) table: CdkTable; + @ViewChild(CdkTable, {static: false}) table: CdkTable; } function getElements(element: Element, query: string): Element[] { diff --git a/src/cdk/text-field/autofill.spec.ts b/src/cdk/text-field/autofill.spec.ts index 5879d374fcdf..d8fc9dcc4e12 100644 --- a/src/cdk/text-field/autofill.spec.ts +++ b/src/cdk/text-field/autofill.spec.ts @@ -227,5 +227,5 @@ class Inputs { }) class InputWithCdkAutofilled { // Cast to `any` so we can stub out some methods in the tests. - @ViewChild('input') input: ElementRef; + @ViewChild('input', {static: false}) input: ElementRef; } diff --git a/src/cdk/text-field/autosize.spec.ts b/src/cdk/text-field/autosize.spec.ts index 47ea1a5142aa..5d273578b69f 100644 --- a/src/cdk/text-field/autosize.spec.ts +++ b/src/cdk/text-field/autosize.spec.ts @@ -295,7 +295,7 @@ const textareaStyleReset = ` styles: [textareaStyleReset], }) class AutosizeTextAreaWithContent { - @ViewChild('autosize') autosize: CdkTextareaAutosize; + @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize; minRows: number | null = null; maxRows: number | null = null; content: string = ''; diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index d5258500930a..a9196a37cc9a 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -1131,7 +1131,7 @@ class SimpleCdkTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); indent: number | string = 28; - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @@ -1152,7 +1152,7 @@ class NestedCdkTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1172,7 +1172,7 @@ class StaticNestedCdkTreeApp { dataSource: FakeDataSource; - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; constructor() { const dataSource = new FakeDataSource(this.treeControl); @@ -1208,7 +1208,7 @@ class WhenNodeNestedCdkTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @@ -1232,7 +1232,7 @@ class CdkTreeAppWithToggle { treeControl: TreeControl = new FlatTreeControl(this.getLevel, this.isExpandable); dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1256,7 +1256,7 @@ class NestedCdkTreeAppWithToggle { treeControl: TreeControl = new NestedTreeControl(this.getChildren); dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1284,7 +1284,7 @@ class WhenNodeCdkTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1310,7 +1310,7 @@ class ArrayDataSourceCdkTreeApp { return this.dataSource.data; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1336,7 +1336,7 @@ class ObservableDataSourceCdkTreeApp { return this.dataSource._dataChange; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1361,7 +1361,7 @@ class ArrayDataSourceNestedCdkTreeApp { return this.dataSource.data; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1386,7 +1386,7 @@ class ObservableDataSourceNestedCdkTreeApp { return this.dataSource._dataChange; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1408,7 +1408,7 @@ class NestedCdkErrorTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } class FakeTreeControl extends BaseTreeControl { @@ -1440,7 +1440,7 @@ class FlatCdkErrorTreeApp { dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @@ -1467,7 +1467,7 @@ class DepthNestedCdkTreeApp { return this.dataSource.data; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1496,7 +1496,7 @@ class CdkTreeAppWithTrackBy { treeControl: TreeControl = new FlatTreeControl(this.getLevel, this.isExpandable); dataSource: FakeDataSource = new FakeDataSource(this.treeControl); - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } @Component({ @@ -1530,5 +1530,5 @@ class NestedCdkTreeAppWithTrackBy { return this.dataSource.data; } - @ViewChild(CdkTree) tree: CdkTree; + @ViewChild(CdkTree, {static: false}) tree: CdkTree; } diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index f8fd44ece011..d61b80eda7f3 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -39,7 +39,7 @@ export class AutocompleteDemo { tdDisabled = false; - @ViewChild(NgModel) modelDir: NgModel; + @ViewChild(NgModel, {static: false}) modelDir: NgModel; groupedStates: StateGroup[]; filteredGroupedStates: StateGroup[]; diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index b41cf9a40d9f..dff9f74f9a5e 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -30,7 +30,7 @@ export class BottomSheetDemo { direction: 'ltr' }; - @ViewChild(TemplateRef) template: TemplateRef; + @ViewChild(TemplateRef, {static: false}) template: TemplateRef; constructor(private _bottomSheet: MatBottomSheet) {} diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts index a5bfb9c67993..5db4f3691b38 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo.ts +++ b/src/dev-app/connected-overlay/connected-overlay-demo.ts @@ -25,8 +25,8 @@ import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core styleUrls: ['connected-overlay-demo.css'], }) export class ConnectedOverlayDemo { - @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin; - @ViewChild('overlay') overlayTemplate: TemplateRef; + @ViewChild(CdkOverlayOrigin, {static: false}) _overlayOrigin: CdkOverlayOrigin; + @ViewChild('overlay', {static: false}) overlayTemplate: TemplateRef; originX: HorizontalConnectionPos = 'start'; originY: VerticalConnectionPos = 'bottom'; diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index 4e83d149f82a..45c37a262d60 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/src/dev-app/datepicker/datepicker-demo.ts @@ -111,7 +111,7 @@ export class CustomHeader implements OnDestroy { }) export class CustomHeaderNgContent { - @ViewChild(MatCalendarHeader) + @ViewChild(MatCalendarHeader, {static: false}) header: MatCalendarHeader; constructor(@Optional() private _dateAdapter: DateAdapter) {} diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index d79a59931bdd..5799bfd38dfd 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -47,7 +47,7 @@ export class DialogDemo { }; numTemplateOpens = 0; - @ViewChild(TemplateRef) template: TemplateRef; + @ViewChild(TemplateRef, {static: false}) template: TemplateRef; constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) { // Possible useful example for the open and closeAll events. diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts index 54e6737af38f..aed26ac4fc41 100644 --- a/src/dev-app/expansion/expansion-demo.ts +++ b/src/dev-app/expansion/expansion-demo.ts @@ -17,7 +17,7 @@ import {MatAccordion} from '@angular/material'; templateUrl: 'expansion-demo.html', }) export class ExpansionDemo { - @ViewChild(MatAccordion) accordion: MatAccordion; + @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion; displayMode = 'default'; multi = false; diff --git a/src/dev-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts index b01764b1174c..8a6f5258c19f 100644 --- a/src/dev-app/ripple/ripple-demo.ts +++ b/src/dev-app/ripple/ripple-demo.ts @@ -17,7 +17,7 @@ import {MatRipple} from '@angular/material'; styleUrls: ['ripple-demo.css'], }) export class RippleDemo { - @ViewChild(MatRipple) ripple: MatRipple; + @ViewChild(MatRipple, {static: false}) ripple: MatRipple; centered = false; disabled = false; diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts index a77f751bf2ef..4e89b786035d 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.ts +++ b/src/dev-app/snack-bar/snack-bar-demo.ts @@ -23,7 +23,7 @@ import { templateUrl: 'snack-bar-demo.html', }) export class SnackBarDemo { - @ViewChild('template') template: TemplateRef; + @ViewChild('template', {static: false}) template: TemplateRef; message = 'Snack Bar opened.'; actionButtonLabel = 'Retry'; action = false; diff --git a/src/e2e-app/dialog/dialog-e2e.ts b/src/e2e-app/dialog/dialog-e2e.ts index b7bac051ef5f..15d8f1687a2f 100644 --- a/src/e2e-app/dialog/dialog-e2e.ts +++ b/src/e2e-app/dialog/dialog-e2e.ts @@ -9,7 +9,7 @@ import {MatDialog, MatDialogRef, MatDialogConfig} from '@angular/material'; export class DialogE2E { dialogRef: MatDialogRef | null; - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; constructor (private _dialog: MatDialog) { } diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 84d7a3551bc7..d3154b283f9b 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -2353,8 +2353,8 @@ class SimpleAutocomplete implements OnDestroy { closedSpy = jasmine.createSpy('autocomplete closed spy'); @ViewChild(MatAutocompleteTrigger, {static: true}) trigger: MatAutocompleteTrigger; - @ViewChild(MatAutocomplete) panel: MatAutocomplete; - @ViewChild(MatFormField) formField: MatFormField; + @ViewChild(MatAutocomplete, {static: false}) panel: MatAutocomplete; + @ViewChild(MatFormField, {static: false}) formField: MatFormField; @ViewChildren(MatOption) options: QueryList; states = [ @@ -2408,7 +2408,7 @@ class NgIfAutocomplete { isVisible = true; options = ['One', 'Two', 'Three']; - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; @ViewChildren(MatOption) matOptions: QueryList; constructor() { @@ -2509,7 +2509,7 @@ class AutocompleteWithNumbers { ` }) class AutocompleteWithOnPushDelay implements OnInit { - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; options: string[]; ngOnInit() { @@ -2535,7 +2535,7 @@ class AutocompleteWithNativeInput { filteredOptions: Observable; options = ['En', 'To', 'Tre', 'Fire', 'Fem']; - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; @ViewChildren(MatOption) matOptions: QueryList; constructor() { @@ -2553,7 +2553,7 @@ class AutocompleteWithNativeInput { template: `` }) class AutocompleteWithoutPanel { - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; control = new FormControl(); } @@ -2590,7 +2590,7 @@ class AutocompleteWithFormsAndNonfloatingLabel { ` }) class AutocompleteWithGroups { - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; selectedState: string; stateGroups = [ { @@ -2626,8 +2626,8 @@ class AutocompleteWithSelectEvent { states = ['New York', 'Washington', 'Oregon']; optionSelected = jasmine.createSpy('optionSelected callback'); - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; - @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocomplete, {static: false}) autocomplete: MatAutocomplete; } @@ -2685,8 +2685,8 @@ class AutocompleteWithNumberInputAndNgModel { ` }) class AutocompleteWithDifferentOrigin { - @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; - @ViewChild(MatAutocompleteOrigin) alternateOrigin: MatAutocompleteOrigin; + @ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocompleteOrigin, {static: false}) alternateOrigin: MatAutocompleteOrigin; selectedValue: string; values = ['one', 'two', 'three']; connectedTo?: MatAutocompleteOrigin; diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index e5e9c8bebc6b..6c018394d03c 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -814,7 +814,9 @@ class DirectiveWithViewContainer { @Component({template: ``}) class ComponentWithChildViewContainer { - @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer; + @ViewChild(DirectiveWithViewContainer, { + static: false + }) childWithViewContainer: DirectiveWithViewContainer; get childViewContainer() { return this.childWithViewContainer.viewContainerRef; @@ -830,7 +832,7 @@ class ComponentWithTemplateRef { localValue: string; bottomSheetRef: MatBottomSheetRef; - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; setRef(bottomSheetRef: MatBottomSheetRef): string { this.bottomSheetRef = bottomSheetRef; diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index b27ded3acfd7..13c37bded024 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/button-toggle/button-toggle.spec.ts @@ -938,7 +938,7 @@ class ButtonToggleWithAriaLabelledby {} ` }) class RepeatedButtonTogglesWithPreselectedValue { - @ViewChild(MatButtonToggleGroup) toggleGroup: MatButtonToggleGroup; + @ViewChild(MatButtonToggleGroup, {static: false}) toggleGroup: MatButtonToggleGroup; @ViewChildren(MatButtonToggle) toggles: QueryList; possibleValues = ['One', 'Two', 'Three']; diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 282d1fe74dcc..583cc5a5410b 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -395,7 +395,7 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit /** Type of the button toggle. Either 'radio' or 'checkbox'. */ _type: ToggleType; - @ViewChild('button') _buttonElement: ElementRef; + @ViewChild('button', {static: false}) _buttonElement: ElementRef; /** The parent button toggle group (exclusive selection). Optional. */ buttonToggleGroup: MatButtonToggleGroup; diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 96ad9f52ceca..d39a6a392ec3 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -89,7 +89,7 @@ export class MatButton extends _MatButtonMixinBase readonly isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); /** Reference to the MatRipple instance of the button. */ - @ViewChild(MatRipple) ripple: MatRipple; + @ViewChild(MatRipple, {static: false}) ripple: MatRipple; constructor(elementRef: ElementRef, /** diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 2d87cc8cb981..93b0d2fc1594 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -1237,7 +1237,7 @@ class CheckboxWithTabIndex { `, }) class CheckboxUsingViewChild { - @ViewChild(MatCheckbox) checkbox: MatCheckbox; + @ViewChild(MatCheckbox, {static: false}) checkbox: MatCheckbox; set isDisabled(value: boolean) { this.checkbox.disabled = value; diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 31d1a0888392..279253dc9213 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -171,10 +171,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc @Input() value: string; /** The native `` element */ - @ViewChild('input') _inputElement: ElementRef; + @ViewChild('input', {static: false}) _inputElement: ElementRef; /** Reference to the ripple instance of the checkbox. */ - @ViewChild(MatRipple) ripple: MatRipple; + @ViewChild(MatRipple, {static: false}) ripple: MatRipple; /** * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts index 8e236ff46197..b135e85d3ae1 100644 --- a/src/lib/chips/chip-input.spec.ts +++ b/src/lib/chips/chip-input.spec.ts @@ -214,7 +214,7 @@ describe('MatChipInput', () => { ` }) class TestChipInput { - @ViewChild(MatChipList) chipListInstance: MatChipList; + @ViewChild(MatChipList, {static: false}) chipListInstance: MatChipList; addOnBlur: boolean = false; placeholder = ''; diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index a154445592fa..46a9de4c4678 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -1389,7 +1389,7 @@ class BasicChipList { tabIndexOverride: number; selectable: boolean; - @ViewChild(MatChipList) chipList: MatChipList; + @ViewChild(MatChipList, {static: false}) chipList: MatChipList; @ViewChildren(MatChip) chips: QueryList; } @@ -1424,7 +1424,7 @@ class MultiSelectionChipList { tabIndexOverride: number; selectable: boolean; - @ViewChild(MatChipList) chipList: MatChipList; + @ViewChild(MatChipList, {static: false}) chipList: MatChipList; @ViewChildren(MatChip) chips: QueryList; } @@ -1489,7 +1489,7 @@ class InputChipList { } } - @ViewChild(MatChipList) chipList: MatChipList; + @ViewChild(MatChipList, {static: false}) chipList: MatChipList; @ViewChildren(MatChip) chips: QueryList; } @@ -1552,7 +1552,7 @@ class ChipListWithFormErrorMessages { ]; @ViewChildren(MatChip) chips: QueryList; - @ViewChild('form') form: NgForm; + @ViewChild('form', {static: false}) form: NgForm; formControl = new FormControl('', Validators.required); } diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 2875266932ac..587cf880553f 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -403,7 +403,7 @@ describe('Chips', () => { ` }) class SingleChip { - @ViewChild(MatChipList) chipList: MatChipList; + @ViewChild(MatChipList, {static: false}) chipList: MatChipList; disabled: boolean = false; name: string = 'Test'; color: string = 'primary'; diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 10fe4bb79787..a972c6f951c1 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -149,13 +149,13 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes _chipListMultiple: boolean = false; /** The chip avatar */ - @ContentChild(MatChipAvatar) avatar: MatChipAvatar; + @ContentChild(MatChipAvatar, {static: false}) avatar: MatChipAvatar; /** The chip's trailing icon. */ - @ContentChild(MatChipTrailingIcon) trailingIcon: MatChipTrailingIcon; + @ContentChild(MatChipTrailingIcon, {static: false}) trailingIcon: MatChipTrailingIcon; /** The chip's remove toggler. */ - @ContentChild(forwardRef(() => MatChipRemove)) removeIcon: MatChipRemove; + @ContentChild(forwardRef(() => MatChipRemove), {static: false}) removeIcon: MatChipRemove; /** Whether the chip is selected. */ @Input() diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 9fd99c2c9546..6d1e9d4b7670 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -728,7 +728,7 @@ describe('MatRipple', () => { `, }) class BasicRippleContainer { - @ViewChild('ripple') ripple: MatRipple; + @ViewChild('ripple', {static: false}) ripple: MatRipple; } @Component({ @@ -752,7 +752,7 @@ class RippleContainerWithInputBindings { disabled = false; radius = 0; color = ''; - @ViewChild(MatRipple) ripple: MatRipple; + @ViewChild(MatRipple, {static: false}) ripple: MatRipple; } @Component({ @@ -763,6 +763,6 @@ class RippleContainerWithoutBindings {} @Component({ template: `
` }) class RippleContainerWithNgIf { - @ViewChild(MatRipple) ripple: MatRipple; + @ViewChild(MatRipple, {static: false}) ripple: MatRipple; isDestroyed = false; } diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index 50b310171b85..d7f336baf662 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -246,13 +246,13 @@ export class MatCalendar implements AfterContentInit, AfterViewChecked, OnDes @Output() readonly _userSelection: EventEmitter = new EventEmitter(); /** Reference to the current month view component. */ - @ViewChild(MatMonthView) monthView: MatMonthView; + @ViewChild(MatMonthView, {static: false}) monthView: MatMonthView; /** Reference to the current year view component. */ - @ViewChild(MatYearView) yearView: MatYearView; + @ViewChild(MatYearView, {static: false}) yearView: MatYearView; /** Reference to the current multi-year view component. */ - @ViewChild(MatMultiYearView) multiYearView: MatMultiYearView; + @ViewChild(MatMultiYearView, {static: false}) multiYearView: MatMultiYearView; /** * The current active date. This determines which time period is shown and which date is diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts index b02e521c1895..d2d483a329b8 100644 --- a/src/lib/datepicker/datepicker-toggle.ts +++ b/src/lib/datepicker/datepicker-toggle.ts @@ -81,10 +81,10 @@ export class MatDatepickerToggle implements AfterContentInit, OnChanges, OnDe @Input() disableRipple: boolean; /** Custom icon set by the consumer. */ - @ContentChild(MatDatepickerToggleIcon) _customIcon: MatDatepickerToggleIcon; + @ContentChild(MatDatepickerToggleIcon, {static: false}) _customIcon: MatDatepickerToggleIcon; /** Underlying button element. */ - @ViewChild('button') _button: MatButton; + @ViewChild('button', {static: false}) _button: MatButton; constructor( public _intl: MatDatepickerIntl, diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index c26c22afb0d4..eae629808ebd 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -1703,8 +1703,8 @@ class StandardDatepicker { touch = false; disabled = false; date: Date | null = new Date(2020, JAN, 1); - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; } @@ -1720,7 +1720,7 @@ class MultiInputDatepicker {} template: ``, }) class NoInputDatepicker { - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; } @@ -1733,7 +1733,7 @@ class NoInputDatepicker { class DatepickerWithStartAt { date = new Date(2020, JAN, 1); startDate = new Date(2010, JAN, 1); - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; } @@ -1745,7 +1745,7 @@ class DatepickerWithStartAt { }) class DatepickerWithStartViewYear { date = new Date(2020, JAN, 1); - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; onYearSelection() {} } @@ -1760,7 +1760,7 @@ class DatepickerWithStartViewYear { }) class DatepickerWithStartViewMultiYear { date = new Date(2020, JAN, 1); - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; onMultiYearSelection() {} } @@ -1774,8 +1774,8 @@ class DatepickerWithStartViewMultiYear { }) class DatepickerWithNgModel { selected: Date | null = null; - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; } @@ -1788,9 +1788,9 @@ class DatepickerWithNgModel { }) class DatepickerWithFormControl { formControl = new FormControl(); - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; - @ViewChild(MatDatepickerToggle) datepickerToggle: MatDatepickerToggle; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; + @ViewChild(MatDatepickerToggle, {static: false}) datepickerToggle: MatDatepickerToggle; } @@ -1802,8 +1802,8 @@ class DatepickerWithFormControl { `, }) class DatepickerWithToggle { - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) input: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) input: MatDatepickerInput; touchUI = true; } @@ -1829,9 +1829,9 @@ class DatepickerWithCustomIcon {} `, }) class FormFieldDatepicker { - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; - @ViewChild(MatFormField) formField: MatFormField; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; + @ViewChild(MatFormField, {static: false}) formField: MatFormField; } @@ -1843,8 +1843,8 @@ class FormFieldDatepicker { `, }) class DatepickerWithMinAndMaxValidation { - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(NgModel) model: NgModel; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(NgModel, {static: false}) model: NgModel; date: Date | null; minDate = new Date(2010, JAN, 1); maxDate = new Date(2020, JAN, 1); @@ -1859,7 +1859,7 @@ class DatepickerWithMinAndMaxValidation { `, }) class DatepickerWithFilterAndValidation { - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; date: Date; filter = (date: Date) => date.getDate() != 1; } @@ -1873,7 +1873,7 @@ class DatepickerWithFilterAndValidation { ` }) class DatepickerWithChangeAndInputEvents { - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; onChange() {} @@ -1893,8 +1893,8 @@ class DatepickerWithChangeAndInputEvents { }) class DatepickerWithi18n { date: Date | null = new Date(2010, JAN, 1); - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; } @@ -1909,8 +1909,8 @@ class DatepickerWithISOStrings { min = new Date(2017, JAN, 1).toISOString(); max = new Date (2017, DEC, 31).toISOString(); startAt = new Date(2017, JUL, 1).toISOString(); - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; } @@ -1924,7 +1924,7 @@ class DatepickerWithEvents { selected: Date | null = null; openedSpy = jasmine.createSpy('opened spy'); closedSpy = jasmine.createSpy('closed spy'); - @ViewChild('d') datepicker: MatDatepicker; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; } @@ -1935,7 +1935,7 @@ class DatepickerWithEvents { `, }) class DatepickerOpeningOnFocus { - @ViewChild(MatDatepicker) datepicker: MatDatepicker; + @ViewChild(MatDatepicker, {static: false}) datepicker: MatDatepicker; } @@ -1946,7 +1946,7 @@ class DatepickerOpeningOnFocus { `, }) class DatepickerWithCustomHeader { - @ViewChild('ch') datepicker: MatDatepicker; + @ViewChild('ch', {static: false}) datepicker: MatDatepicker; customHeaderForDatePicker = CustomHeaderForDatepicker; } @@ -1965,8 +1965,8 @@ class CustomHeaderForDatepicker {} `, }) class DelayedDatepicker { - @ViewChild('d') datepicker: MatDatepicker; - @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; + @ViewChild('d', {static: false}) datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput, {static: false}) datepickerInput: MatDatepickerInput; date: Date | null; assignedDatepicker: MatDatepicker; } diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index d952a7d8f917..4e8951d6af6b 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -109,7 +109,7 @@ export class MatDatepickerContent extends _MatDatepickerContentMixinBase implements AfterViewInit, CanColor { /** Reference to the internal calendar component. */ - @ViewChild(MatCalendar) _calendar: MatCalendar; + @ViewChild(MatCalendar, {static: false}) _calendar: MatCalendar; /** Reference to the datepicker that created the overlay. */ datepicker: MatDatepicker; diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts index 3f4c198d24b3..04e73cba6f8d 100644 --- a/src/lib/datepicker/month-view.ts +++ b/src/lib/datepicker/month-view.ts @@ -110,7 +110,7 @@ export class MatMonthView implements AfterContentInit { @Output() readonly activeDateChange: EventEmitter = new EventEmitter(); /** The body of calendar table */ - @ViewChild(MatCalendarBody) _matCalendarBody: MatCalendarBody; + @ViewChild(MatCalendarBody, {static: false}) _matCalendarBody: MatCalendarBody; /** The label for this month (e.g. "January 2017"). */ _monthLabel: string; diff --git a/src/lib/datepicker/multi-year-view.spec.ts b/src/lib/datepicker/multi-year-view.spec.ts index c89c8ae1ccb0..bd4337eca58f 100644 --- a/src/lib/datepicker/multi-year-view.spec.ts +++ b/src/lib/datepicker/multi-year-view.spec.ts @@ -255,7 +255,7 @@ class StandardMultiYearView { selected = new Date(2020, JAN, 1); selectedYear: Date; - @ViewChild(MatMultiYearView) multiYearView: MatMultiYearView; + @ViewChild(MatMultiYearView, {static: false}) multiYearView: MatMultiYearView; } @Component({ diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts index de4f90514b04..91c1ccddd93a 100644 --- a/src/lib/datepicker/multi-year-view.ts +++ b/src/lib/datepicker/multi-year-view.ts @@ -106,7 +106,7 @@ export class MatMultiYearView implements AfterContentInit { @Output() readonly activeDateChange: EventEmitter = new EventEmitter(); /** The body of calendar table */ - @ViewChild(MatCalendarBody) _matCalendarBody: MatCalendarBody; + @ViewChild(MatCalendarBody, {static: false}) _matCalendarBody: MatCalendarBody; /** Grid of calendar cells representing the currently displayed years. */ _years: MatCalendarCell[][]; diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index d69cca59137e..496a6931660c 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/src/lib/datepicker/year-view.spec.ts @@ -322,7 +322,7 @@ class StandardYearView { selected = new Date(2017, MAR, 10); selectedMonth: Date; - @ViewChild(MatYearView) yearView: MatYearView; + @ViewChild(MatYearView, {static: false}) yearView: MatYearView; } diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index 54f42dee53c4..bd70efc002cd 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -101,7 +101,7 @@ export class MatYearView implements AfterContentInit { @Output() readonly activeDateChange: EventEmitter = new EventEmitter(); /** The body of calendar table */ - @ViewChild(MatCalendarBody) _matCalendarBody: MatCalendarBody; + @ViewChild(MatCalendarBody, {static: false}) _matCalendarBody: MatCalendarBody; /** Grid of calendar cells representing the months of the year. */ _months: MatCalendarCell[][]; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 246a1863ba0f..d4056697572b 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -1470,7 +1470,9 @@ class ComponentWithOnPushViewContainer { template: ``, }) class ComponentWithChildViewContainer { - @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer; + @ViewChild(DirectiveWithViewContainer, { + static: false + }) childWithViewContainer: DirectiveWithViewContainer; get childViewContainer() { return this.childWithViewContainer.viewContainerRef; @@ -1486,7 +1488,7 @@ class ComponentWithTemplateRef { localValue: string; dialogRef: MatDialogRef; - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; setDialogRef(dialogRef: MatDialogRef): string { this.dialogRef = dialogRef; @@ -1541,7 +1543,9 @@ class ContentElementDialog {} ` }) class ComponentWithContentElementTemplateRef { - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, { + static: false + }) templateRef: TemplateRef; } @Component({ diff --git a/src/lib/expansion/accordion.spec.ts b/src/lib/expansion/accordion.spec.ts index ab40bda4676b..ef384133ab76 100644 --- a/src/lib/expansion/accordion.spec.ts +++ b/src/lib/expansion/accordion.spec.ts @@ -232,7 +232,7 @@ describe('MatAccordion', () => { `}) class SetOfItems { - @ViewChild(MatAccordion) accordion: MatAccordion; + @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion; @ViewChildren(MatExpansionPanel) panels: QueryList; @ViewChildren(MatExpansionPanelHeader) headers: QueryList; @@ -250,8 +250,8 @@ class SetOfItems { `}) class NestedPanel { - @ViewChild('outerPanel') outerPanel: MatExpansionPanel; - @ViewChild('innerPanel') innerPanel: MatExpansionPanel; + @ViewChild('outerPanel', {static: false}) outerPanel: MatExpansionPanel; + @ViewChild('innerPanel', {static: false}) innerPanel: MatExpansionPanel; } @Component({template: ` diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index baae4451993f..9a2a1fdd54eb 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -128,10 +128,10 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI accordion: MatAccordionBase; /** Content that will be rendered lazily. */ - @ContentChild(MatExpansionPanelContent) _lazyContent: MatExpansionPanelContent; + @ContentChild(MatExpansionPanelContent, {static: false}) _lazyContent: MatExpansionPanelContent; /** Element containing the panel's user-provided content. */ - @ViewChild('body') _body: ElementRef; + @ViewChild('body', {static: false}) _body: ElementRef; /** Portal holding the user's content. */ _portal: TemplatePortal; diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index 300b49d7a7ab..1b039d93d68c 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -421,7 +421,7 @@ class PanelWithContent { disabled = false; openCallback = jasmine.createSpy('openCallback'); closeCallback = jasmine.createSpy('closeCallback'); - @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; + @ViewChild(MatExpansionPanel, {static: false}) panel: MatExpansionPanel; } @Component({ @@ -434,7 +434,7 @@ class PanelWithContent { }) class PanelWithContentInNgIf { expansionShown = true; - @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; + @ViewChild(MatExpansionPanel, {static: false}) panel: MatExpansionPanel; } @Component({ diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index f92a433830ee..62d99b62ba28 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -484,7 +484,7 @@ class GridListWithTooWideColspan { } @Component({template: ''}) class GridListWithDynamicCols { - @ViewChild(MatGridList) gridList: MatGridList; + @ViewChild(MatGridList, {static: false}) gridList: MatGridList; cols = 2; } diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 96121aaae9aa..7fb266214fb9 100644 --- a/src/lib/input/input.spec.ts +++ b/src/lib/input/input.spec.ts @@ -1777,7 +1777,7 @@ class MatInputMissingMatInputTestController {} ` }) class MatInputWithFormErrorMessages { - @ViewChild('form') form: NgForm; + @ViewChild('form', {static: false}) form: NgForm; formControl = new FormControl('', Validators.required); renderError = true; } @@ -1819,7 +1819,7 @@ class MatInputWithCustomErrorStateMatcher { ` }) class MatInputWithFormGroupErrorMessages { - @ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective; + @ViewChild(FormGroupDirective, {static: false}) formGroupDirective: FormGroupDirective; formGroup = new FormGroup({ name: new FormControl('', Validators.required) }); @@ -1900,7 +1900,7 @@ class MatInputWithLabelAndPlaceholder { ` }) class MatInputWithAppearance { - @ViewChild(MatFormField) formField: MatFormField; + @ViewChild(MatFormField, {static: false}) formField: MatFormField; appearance: MatFormFieldAppearance; } @@ -1914,7 +1914,7 @@ class MatInputWithAppearance { ` }) class MatInputWithAppearanceAndLabel { - @ViewChild(MatFormField) formField: MatFormField; + @ViewChild(MatFormField, {static: false}) formField: MatFormField; appearance: MatFormFieldAppearance; showPrefix: boolean; labelContent = 'Label'; @@ -1958,7 +1958,7 @@ const textareaStyleReset = ` }) class AutosizeTextareaWithLongPlaceholder { placeholder = 'Long Long Long Long Long Long Long Long Placeholder'; - @ViewChild(MatTextareaAutosize) autosize: MatTextareaAutosize; + @ViewChild(MatTextareaAutosize, {static: false}) autosize: MatTextareaAutosize; } @Component({ diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 1b9ee16a10e9..caae8c07cd40 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -181,8 +181,8 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn private _destroyed = new Subject(); @ContentChildren(MatLine) _lines: QueryList; - @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler; - @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler; + @ContentChild(MatListAvatarCssMatStyler, {static: false}) _avatar: MatListAvatarCssMatStyler; + @ContentChild(MatListIconCssMatStyler, {static: false}) _icon: MatListIconCssMatStyler; constructor(private _element: ElementRef, @Optional() navList?: MatNavList, diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index f8bcc8cf9967..0b991d4855a4 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -117,12 +117,12 @@ export class MatListOption extends _MatListOptionMixinBase private _disabled = false; private _hasFocus = false; - @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler; - @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler; + @ContentChild(MatListAvatarCssMatStyler, {static: false}) _avatar: MatListAvatarCssMatStyler; + @ContentChild(MatListIconCssMatStyler, {static: false}) _icon: MatListIconCssMatStyler; @ContentChildren(MatLine) _lines: QueryList; /** DOM element containing the item's text. */ - @ViewChild('text') _text: ElementRef; + @ViewChild('text', {static: false}) _text: ElementRef; /** Whether the label should appear before or after the checkbox. Defaults to 'after' */ @Input() checkboxPosition: 'before' | 'after' = 'after'; diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 78700a5584ee..1a66709ee27d 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -166,7 +166,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI } /** @docs-private */ - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; /** * List of the items inside of a menu. @@ -179,7 +179,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI * Menu content that will be rendered lazily. * @docs-private */ - @ContentChild(MatMenuContent) lazyContent: MatMenuContent; + @ContentChild(MatMenuContent, {static: false}) lazyContent: MatMenuContent; /** Whether the menu should overlap its trigger. */ @Input() diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index d2627b4917c0..6207d00a129d 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -2018,9 +2018,9 @@ describe('MatMenu default overrides', () => { ` }) class SimpleMenu { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; - @ViewChild('triggerEl') triggerEl: ElementRef; - @ViewChild(MatMenu) menu: MatMenu; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; + @ViewChild('triggerEl', {static: false}) triggerEl: ElementRef; + @ViewChild(MatMenu, {static: false}) menu: MatMenu; @ViewChildren(MatMenuItem) items: QueryList; extraItems: string[] = []; closeCallback = jasmine.createSpy('menu closed callback'); @@ -2038,8 +2038,8 @@ class SimpleMenu { ` }) class PositionedMenu { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; - @ViewChild('triggerEl') triggerEl: ElementRef; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; + @ViewChild('triggerEl', {static: false}) triggerEl: ElementRef; xPosition: MenuPositionX = 'before'; yPosition: MenuPositionY = 'above'; } @@ -2058,8 +2058,8 @@ interface TestableMenu { }) class OverlapMenu implements TestableMenu { @Input() overlapTrigger: boolean; - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; - @ViewChild('triggerEl') triggerEl: ElementRef; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; + @ViewChild('triggerEl', {static: false}) triggerEl: ElementRef; } @Component({ @@ -2079,7 +2079,7 @@ class CustomMenuPanel implements MatMenuPanel { overlapTrigger = true; parentMenu: MatMenuPanel; - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; @Output() close = new EventEmitter(); focusFirstItem = () => {}; resetActiveItem = () => {}; @@ -2095,7 +2095,7 @@ class CustomMenuPanel implements MatMenuPanel { ` }) class CustomMenu { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; } @@ -2146,22 +2146,22 @@ class CustomMenu { ` }) class NestedMenu { - @ViewChild('root') rootMenu: MatMenu; - @ViewChild('rootTrigger') rootTrigger: MatMenuTrigger; - @ViewChild('rootTriggerEl') rootTriggerEl: ElementRef; - @ViewChild('alternateTrigger') alternateTrigger: MatMenuTrigger; + @ViewChild('root', {static: false}) rootMenu: MatMenu; + @ViewChild('rootTrigger', {static: false}) rootTrigger: MatMenuTrigger; + @ViewChild('rootTriggerEl', {static: false}) rootTriggerEl: ElementRef; + @ViewChild('alternateTrigger', {static: false}) alternateTrigger: MatMenuTrigger; readonly rootCloseCallback = jasmine.createSpy('root menu closed callback'); - @ViewChild('levelOne') levelOneMenu: MatMenu; - @ViewChild('levelOneTrigger') levelOneTrigger: MatMenuTrigger; + @ViewChild('levelOne', {static: false}) levelOneMenu: MatMenu; + @ViewChild('levelOneTrigger', {static: false}) levelOneTrigger: MatMenuTrigger; readonly levelOneCloseCallback = jasmine.createSpy('level one menu closed callback'); - @ViewChild('levelTwo') levelTwoMenu: MatMenu; - @ViewChild('levelTwoTrigger') levelTwoTrigger: MatMenuTrigger; + @ViewChild('levelTwo', {static: false}) levelTwoMenu: MatMenu; + @ViewChild('levelTwoTrigger', {static: false}) levelTwoTrigger: MatMenuTrigger; readonly levelTwoCloseCallback = jasmine.createSpy('level one menu closed callback'); - @ViewChild('lazy') lazyMenu: MatMenu; - @ViewChild('lazyTrigger') lazyTrigger: MatMenuTrigger; + @ViewChild('lazy', {static: false}) lazyMenu: MatMenu; + @ViewChild('lazyTrigger', {static: false}) lazyTrigger: MatMenuTrigger; showLazy = false; } @@ -2181,8 +2181,8 @@ class NestedMenu { ` }) class NestedMenuCustomElevation { - @ViewChild('rootTrigger') rootTrigger: MatMenuTrigger; - @ViewChild('levelOneTrigger') levelOneTrigger: MatMenuTrigger; + @ViewChild('rootTrigger', {static: false}) rootTrigger: MatMenuTrigger; + @ViewChild('levelOneTrigger', {static: false}) levelOneTrigger: MatMenuTrigger; } @@ -2204,8 +2204,8 @@ class NestedMenuCustomElevation { ` }) class NestedMenuRepeater { - @ViewChild('rootTriggerEl') rootTriggerEl: ElementRef; - @ViewChild('levelOneTrigger') levelOneTrigger: MatMenuTrigger; + @ViewChild('rootTriggerEl', {static: false}) rootTriggerEl: ElementRef; + @ViewChild('levelOneTrigger', {static: false}) levelOneTrigger: MatMenuTrigger; items = ['one', 'two', 'three']; } @@ -2225,7 +2225,7 @@ class NestedMenuRepeater { ` }) class SubmenuDeclaredInsideParentMenu { - @ViewChild('rootTriggerEl') rootTriggerEl: ElementRef; + @ViewChild('rootTriggerEl', {static: false}) rootTriggerEl: ElementRef; } @@ -2249,8 +2249,8 @@ class FakeIcon {} ` }) class SimpleLazyMenu { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; - @ViewChild('triggerEl') triggerEl: ElementRef; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; + @ViewChild('triggerEl', {static: false}) triggerEl: ElementRef; @ViewChildren(MatMenuItem) items: QueryList; } @@ -2275,8 +2275,8 @@ class SimpleLazyMenu { ` }) class LazyMenuWithContext { - @ViewChild('triggerOne') triggerOne: MatMenuTrigger; - @ViewChild('triggerTwo') triggerTwo: MatMenuTrigger; + @ViewChild('triggerOne', {static: false}) triggerOne: MatMenuTrigger; + @ViewChild('triggerTwo', {static: false}) triggerTwo: MatMenuTrigger; } @@ -2294,9 +2294,9 @@ class LazyMenuWithContext { ` }) class DynamicPanelMenu { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; - @ViewChild('one') firstMenu: MatMenu; - @ViewChild('two') secondMenu: MatMenu; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; + @ViewChild('one', {static: false}) firstMenu: MatMenu; + @ViewChild('two', {static: false}) secondMenu: MatMenu; } @@ -2311,5 +2311,5 @@ class DynamicPanelMenu { ` }) class MenuWithCheckboxItems { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; + @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger; } diff --git a/src/lib/paginator/paginator.spec.ts b/src/lib/paginator/paginator.spec.ts index 5383db58034a..341ade9da951 100644 --- a/src/lib/paginator/paginator.spec.ts +++ b/src/lib/paginator/paginator.spec.ts @@ -456,7 +456,7 @@ class MatPaginatorApp { pageEvent = jasmine.createSpy('page event'); color: ThemePalette; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; goToLastPage() { this.pageIndex = Math.ceil(this.length / this.pageSize) - 1; @@ -469,7 +469,7 @@ class MatPaginatorApp { `, }) class MatPaginatorWithoutInputsApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; } @Component({ @@ -478,7 +478,7 @@ class MatPaginatorWithoutInputsApp { `, }) class MatPaginatorWithoutPageSizeApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; } @Component({ @@ -487,7 +487,7 @@ class MatPaginatorWithoutPageSizeApp { `, }) class MatPaginatorWithoutOptionsApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; } @Component({ @@ -500,5 +500,5 @@ class MatPaginatorWithoutOptionsApp { ` }) class MatPaginatorWithStringValues { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; } diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index 3afcf3e8587c..c1e5583a50ec 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -146,7 +146,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor set bufferValue(v: number) { this._bufferValue = clamp(v || 0); } private _bufferValue: number = 0; - @ViewChild('primaryValueBar') _primaryValueBar: ElementRef; + @ViewChild('primaryValueBar', {static: false}) _primaryValueBar: ElementRef; /** * Event emitted when animation of the primary progress bar completes. This event will not diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index 33615b46dd35..15097096e6ac 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -858,7 +858,7 @@ class RadioGroupWithNgModel { template: `One` }) class DisableableRadioButton { - @ViewChild(MatRadioButton) matRadioButton: MatRadioButton; + @ViewChild(MatRadioButton, {static: false}) matRadioButton: MatRadioButton; set disabled(value: boolean) { this.matRadioButton.disabled = value; diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index c0af18e70fbf..4fc4d2e99f69 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -455,7 +455,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase private _removeUniqueSelectionListener: () => void = () => {}; /** The native `` element */ - @ViewChild('input') _inputElement: ElementRef; + @ViewChild('input', {static: false}) _inputElement: ElementRef; constructor(@Optional() radioGroup: MatRadioGroup, elementRef: ElementRef, diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 5aebeef226e3..88a0993db257 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -4257,7 +4257,7 @@ class NgModelSelect { ]; isDisabled: boolean; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; } @@ -4303,7 +4303,7 @@ class NgIfSelect { ]; control = new FormControl('pizza-1'); - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4347,7 +4347,7 @@ class SelectInitWithoutOptions { foods: any[]; control = new FormControl('pizza-1'); - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; addOptions() { @@ -4369,7 +4369,7 @@ class SelectInitWithoutOptions { }] }) class CustomSelectAccessor implements ControlValueAccessor { - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; writeValue: (value?: any) => void = () => {}; registerOnChange: (changeFn?: (value: any) => void) => void = () => {}; @@ -4478,7 +4478,7 @@ class FloatLabelSelect { { value: 'tacos-2', viewValue: 'Tacos'} ]; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4507,7 +4507,7 @@ class MultiSelect { ]; control = new FormControl(); - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number; } @@ -4567,7 +4567,7 @@ class BasicSelectNoPlaceholder { } ` }) class BasicSelectWithTheming { - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; theme: string; } @@ -4595,7 +4595,7 @@ class ResetValuesSelect { ]; control = new FormControl(); - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4671,7 +4671,7 @@ class SelectWithGroups { } ]; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; } @@ -4728,8 +4728,8 @@ class InvalidSelectInForm { ` }) class SelectInsideFormGroup { - @ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(FormGroupDirective, {static: false}) formGroupDirective: FormGroupDirective; + @ViewChild(MatSelect, {static: false}) select: MatSelect; options = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, @@ -4759,7 +4759,7 @@ class BasicSelectWithoutForms { { value: 'sandwich-2', viewValue: 'Sandwich' }, ]; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4780,7 +4780,7 @@ class BasicSelectWithoutFormsPreselected { { value: 'pizza-1', viewValue: 'Pizza' }, ]; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4802,7 +4802,7 @@ class BasicSelectWithoutFormsMultiple { { value: 'sandwich-2', viewValue: 'Sandwich' }, ]; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; } @Component({ @@ -4848,7 +4848,7 @@ class NgModelCompareWithSelect { selectedFood: {value: string, viewValue: string} = { value: 'pizza-1', viewValue: 'Pizza' }; comparator: ((f1: any, f2: any) => boolean)|null = this.compareByValue; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; useCompareByValue() { this.comparator = this.compareByValue; } @@ -4876,7 +4876,7 @@ class NgModelCompareWithSelect { ` }) class CustomErrorBehaviorSelect { - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; control = new FormControl(); foods: any[] = [ { value: 'steak-0', viewValue: 'Steak' }, @@ -4905,7 +4905,7 @@ class SingleSelectWithPreselectedArrayValues { selectedFoods = this.foods[1].value; - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; } @@ -4934,7 +4934,7 @@ class SelectWithoutOptionCentering { ]; control = new FormControl('pizza-1'); - @ViewChild(MatSelect) select: MatSelect; + @ViewChild(MatSelect, {static: false}) select: MatSelect; @ViewChildren(MatOption) options: QueryList; } diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index b250bafb858c..c8c22514349a 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -334,13 +334,13 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, controlType = 'mat-select'; /** Trigger that opens the select. */ - @ViewChild('trigger') trigger: ElementRef; + @ViewChild('trigger', {static: false}) trigger: ElementRef; /** Panel containing the select options. */ - @ViewChild('panel') panel: ElementRef; + @ViewChild('panel', {static: false}) panel: ElementRef; /** Overlay pane containing the options. */ - @ViewChild(CdkConnectedOverlay) overlayDir: CdkConnectedOverlay; + @ViewChild(CdkConnectedOverlay, {static: false}) overlayDir: CdkConnectedOverlay; /** All of the defined select options. */ @ContentChildren(MatOption, { descendants: true }) options: QueryList; @@ -352,7 +352,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, @Input() panelClass: string|string[]|Set|{[key: string]: any}; /** User-supplied override of the trigger element. */ - @ContentChild(MatSelectTrigger) customTrigger: MatSelectTrigger; + @ContentChild(MatSelectTrigger, {static: false}) customTrigger: MatSelectTrigger; /** Placeholder to be shown if no value has been selected. */ @Input() diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index f008018ee8ef..3f85bb0ee3b2 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/src/lib/sidenav/drawer.spec.ts @@ -763,7 +763,7 @@ class DrawerContainerNoDrawerTestApp { } `, }) class DrawerContainerTwoDrawerTestApp { - @ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer; + @ViewChild(MatDrawerContainer, {static: false}) drawerContainer: MatDrawerContainer; } /** Test component that contains an MatDrawerContainer and one MatDrawer. */ @@ -789,10 +789,10 @@ class BasicTestApp { backdropClickedCount = 0; hasBackdrop: boolean | null = null; - @ViewChild('drawer') drawer: MatDrawer; - @ViewChild('drawerButton') drawerButton: ElementRef; - @ViewChild('openButton') openButton: ElementRef; - @ViewChild('closeButton') closeButton: ElementRef; + @ViewChild('drawer', {static: false}) drawer: MatDrawer; + @ViewChild('drawerButton', {static: false}) drawerButton: ElementRef; + @ViewChild('openButton', {static: false}) openButton: ElementRef; + @ViewChild('closeButton', {static: false}) closeButton: ElementRef; open() { this.openCount++; @@ -895,7 +895,7 @@ class DrawerWithoutFocusableElements {} `, }) class DrawerDelayed { - @ViewChild(MatDrawer) drawer: MatDrawer; + @ViewChild(MatDrawer, {static: false}) drawer: MatDrawer; showDrawer = false; } @@ -907,8 +907,8 @@ class DrawerDelayed { `, }) class DrawerContainerStateChangesTestApp { - @ViewChild(MatDrawer) drawer: MatDrawer; - @ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer; + @ViewChild(MatDrawer, {static: false}) drawer: MatDrawer; + @ViewChild(MatDrawerContainer, {static: false}) drawerContainer: MatDrawerContainer; direction: Direction = 'ltr'; mode = 'side'; @@ -926,7 +926,7 @@ class DrawerContainerStateChangesTestApp { `, }) class AutosizeDrawer { - @ViewChild(MatDrawer) drawer: MatDrawer; + @ViewChild(MatDrawer, {static: false}) drawer: MatDrawer; fillerWidth = 0; } @@ -940,5 +940,5 @@ class AutosizeDrawer { `, }) class DrawerContainerWithContent { - @ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer; + @ViewChild(MatDrawerContainer, {static: false}) drawerContainer: MatDrawerContainer; } diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index f5ff404c7a94..ef30ccbb48a7 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -428,8 +428,8 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr }) export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy { @ContentChildren(MatDrawer) _drawers: QueryList; - @ContentChild(MatDrawerContent) _content: MatDrawerContent; - @ViewChild(MatDrawerContent) _userContent: MatDrawerContent; + @ContentChild(MatDrawerContent, {static: false}) _content: MatDrawerContent; + @ViewChild(MatDrawerContent, {static: false}) _userContent: MatDrawerContent; /** The drawer child with the `start` position. */ get start(): MatDrawer | null { return this._start; } diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index effd1fe5edb3..417f3ef5a502 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -117,5 +117,5 @@ export class MatSidenav extends MatDrawer { }) export class MatSidenavContainer extends MatDrawerContainer { @ContentChildren(MatSidenav) _drawers: QueryList; - @ContentChild(MatSidenavContent) _content: MatSidenavContent; + @ContentChild(MatSidenavContent, {static: false}) _content: MatSidenavContent; } diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index df1fc7779e7a..c2026c648ad3 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -126,10 +126,10 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro private _dragPercentage: number; /** Reference to the thumb HTMLElement. */ - @ViewChild('thumbContainer') _thumbEl: ElementRef; + @ViewChild('thumbContainer', {static: false}) _thumbEl: ElementRef; /** Reference to the thumb bar HTMLElement. */ - @ViewChild('toggleBar') _thumbBarEl: ElementRef; + @ViewChild('toggleBar', {static: false}) _thumbBarEl: ElementRef; /** Name value will be applied to the input element if present. */ @Input() name: string | null = null; @@ -182,7 +182,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro get inputId(): string { return `${this.id || this._uniqueId}-input`; } /** Reference to the underlying input element. */ - @ViewChild('input') _inputElement: ElementRef; + @ViewChild('input', {static: false}) _inputElement: ElementRef; constructor(elementRef: ElementRef, /** diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 8bb7c99dd3de..2fae33c6f2dd 100644 --- a/src/lib/slider/slider.spec.ts +++ b/src/lib/slider/slider.spec.ts @@ -1559,7 +1559,7 @@ class SliderWithFormControl { styles: [styles], }) class SliderWithNgModel { - @ViewChild(MatSlider) slider: MatSlider; + @ViewChild(MatSlider, {static: false}) slider: MatSlider; val: number | undefined = 0; } @@ -1583,7 +1583,7 @@ class SliderWithChangeHandler { onChange() { } onInput() { } - @ViewChild(MatSlider) slider: MatSlider; + @ViewChild(MatSlider, {static: false}) slider: MatSlider; } @Component({ @@ -1624,7 +1624,7 @@ class SliderWithNativeTabindexAttr { styles: [styles], }) class SliderWithTwoWayBinding { - @ViewChild(MatSlider) slider: MatSlider; + @ViewChild(MatSlider, {static: false}) slider: MatSlider; value = 0; } diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 67cc25052160..f1245fea0338 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -445,7 +445,7 @@ export class MatSlider extends _MatSliderMixinBase private _valueOnSlideStart: number | null; /** Reference to the inner slider wrapper element. */ - @ViewChild('sliderWrapper') private _sliderWrapper: ElementRef; + @ViewChild('sliderWrapper', {static: false}) private _sliderWrapper: ElementRef; /** * Whether mouse events should be converted to a slider position by calculating their distance diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index 2a65a919a07e..f61420d5ae3b 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -931,7 +931,9 @@ class DirectiveWithViewContainer { template: ``, }) class ComponentWithChildViewContainer { - @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer; + @ViewChild(DirectiveWithViewContainer, { + static: false + }) childWithViewContainer: DirectiveWithViewContainer; childComponentExists: boolean = true; @@ -949,7 +951,7 @@ class ComponentWithChildViewContainer { `, }) class ComponentWithTemplateRef { - @ViewChild(TemplateRef) templateRef: TemplateRef; + @ViewChild(TemplateRef, {static: false}) templateRef: TemplateRef; localValue: string; } diff --git a/src/lib/sort/sort.spec.ts b/src/lib/sort/sort.spec.ts index 72d32b0a9d60..970dfa4ae347 100644 --- a/src/lib/sort/sort.spec.ts +++ b/src/lib/sort/sort.spec.ts @@ -493,11 +493,11 @@ class SimpleMatSortApp { disabledColumnSort = false; disableAllSort = false; - @ViewChild(MatSort) matSort: MatSort; - @ViewChild('defaultA') defaultA: MatSortHeader; - @ViewChild('defaultB') defaultB: MatSortHeader; - @ViewChild('overrideStart') overrideStart: MatSortHeader; - @ViewChild('overrideDisableClear') overrideDisableClear: MatSortHeader; + @ViewChild(MatSort, {static: false}) matSort: MatSort; + @ViewChild('defaultA', {static: false}) defaultA: MatSortHeader; + @ViewChild('defaultB', {static: false}) defaultB: MatSortHeader; + @ViewChild('overrideStart', {static: false}) overrideStart: MatSortHeader; + @ViewChild('overrideDisableClear', {static: false}) overrideDisableClear: MatSortHeader; constructor (public elementRef: ElementRef) { } @@ -563,7 +563,7 @@ class FakeDataSource extends DataSource { ` }) class CdkTableMatSortApp { - @ViewChild(MatSort) matSort: MatSort; + @ViewChild(MatSort, {static: false}) matSort: MatSort; dataSource = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @@ -593,7 +593,7 @@ class CdkTableMatSortApp { ` }) class MatTableMatSortApp { - @ViewChild(MatSort) matSort: MatSort; + @ViewChild(MatSort, {static: false}) matSort: MatSort; dataSource = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index c15560af7ad0..387118147f4b 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -58,7 +58,7 @@ import {MatStepperIcon, MatStepperIconContext} from './stepper-icon'; }) export class MatStep extends CdkStep implements ErrorStateMatcher { /** Content for step label given by ``. */ - @ContentChild(MatStepLabel) stepLabel: MatStepLabel; + @ContentChild(MatStepLabel, {static: false}) stepLabel: MatStepLabel; /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */ constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper, diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts index bac5eee59ae3..e7177bb3cdc4 100644 --- a/src/lib/table/table.spec.ts +++ b/src/lib/table/table.spec.ts @@ -644,7 +644,7 @@ class MatTableWithWhenRowApp { dataSource: FakeDataSource | null = new FakeDataSource(); isFourthRow = (i: number, _rowData: TestData) => i == 3; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatTable, {static: false}) table: MatTable; } @@ -685,7 +685,7 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { @ViewChild(MatTable, {static: true}) table: MatTable; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; @ViewChild(MatSort, {static: true}) sort: MatSort; - @ViewChild(MatSortHeader) sortHeader: MatSortHeader; + @ViewChild(MatSortHeader, {static: false}) sortHeader: MatSortHeader; constructor() { this.underlyingDataSource.data = []; diff --git a/src/lib/tabs/tab-body.spec.ts b/src/lib/tabs/tab-body.spec.ts index 0eb026ffd4c2..0ba0a1cf96be 100644 --- a/src/lib/tabs/tab-body.spec.ts +++ b/src/lib/tabs/tab-body.spec.ts @@ -192,8 +192,8 @@ class SimpleTabBodyApp implements AfterContentInit { position: number; origin: number | null; - @ViewChild(MatTabBody) tabBody: MatTabBody; - @ViewChild(TemplateRef) template: TemplateRef; + @ViewChild(MatTabBody, {static: false}) tabBody: MatTabBody; + @ViewChild(TemplateRef, {static: true}) template: TemplateRef; constructor(private _viewContainerRef: ViewContainerRef) { } diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 2073372b560a..9c51cfb97a80 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -141,7 +141,7 @@ export class MatTabBody implements OnInit, OnDestroy { @Output() readonly _onCentered: EventEmitter = new EventEmitter(true); /** The portal host inside of this container into which the tab body content will be loaded. */ - @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective; + @ViewChild(PortalHostDirective, {static: false}) _portalHost: PortalHostDirective; /** The tab body content to display. */ @Input('content') _content: TemplatePortal; diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index f783f7e11239..6bbfd7bd54ba 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -805,7 +805,7 @@ class AsyncTabsTestApp implements OnInit { class TabGroupWithSimpleApi { otherLabel = 'Fruit'; otherContent = 'Apples, grapes'; - @ViewChild('legumes') legumes: any; + @ViewChild('legumes', {static: false}) legumes: any; } diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 5385bd5ab3e5..f855cb0359a1 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -96,9 +96,9 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn @ContentChildren(MatTab) _tabs: QueryList; - @ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef; + @ViewChild('tabBodyWrapper', {static: false}) _tabBodyWrapper: ElementRef; - @ViewChild('tabHeader') _tabHeader: MatTabHeader; + @ViewChild('tabHeader', {static: false}) _tabHeader: MatTabHeader; /** The tab index that should be selected after the content has been checked. */ private _indexToSelect: number | null = 0; diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 03734a9b8f00..e8491afd84f0 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -101,8 +101,8 @@ export class MatTabHeader extends _MatTabHeaderMixinBase @ViewChild(MatInkBar, {static: true}) _inkBar: MatInkBar; @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef; @ViewChild('tabList', {static: true}) _tabList: ElementRef; - @ViewChild('nextPaginator') _nextPaginator: ElementRef; - @ViewChild('previousPaginator') _previousPaginator: ElementRef; + @ViewChild('nextPaginator', {static: false}) _nextPaginator: ElementRef; + @ViewChild('previousPaginator', {static: false}) _previousPaginator: ElementRef; /** The distance in pixels that the tab labels should be translated to the left. */ private _scrollDistance = 0; diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index 8cfc917ce16d..25d8500a1ca3 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -324,7 +324,7 @@ describe('MatTabNavBar', () => { ` }) class SimpleTabNavBarTestApp { - @ViewChild(MatTabNav) tabNavBar: MatTabNav; + @ViewChild(MatTabNav, {static: false}) tabNavBar: MatTabNav; @ViewChildren(MatTabLink) tabLinks: QueryList; label = ''; diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts index 30fdda96c58f..cf78efb958f2 100644 --- a/src/lib/tabs/tab.ts +++ b/src/lib/tabs/tab.ts @@ -44,7 +44,7 @@ export const _MatTabMixinBase: CanDisableCtor & typeof MatTabBase = }) export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy { /** Content for the tab label given by ``. */ - @ContentChild(MatTabLabel) templateLabel: MatTabLabel; + @ContentChild(MatTabLabel, {static: false}) templateLabel: MatTabLabel; /** * Template provided in the tab content that will be used if present, used to enable lazy-loading diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index b3213608f4b1..12aa1fb1d51a 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -924,8 +924,8 @@ class BasicTooltipDemo { message: any = initialTooltipMessage; showButton: boolean = true; showTooltipClass = false; - @ViewChild(MatTooltip) tooltip: MatTooltip; - @ViewChild('button') button: ElementRef; + @ViewChild(MatTooltip, {static: false}) tooltip: MatTooltip; + @ViewChild('button', {static: false}) button: ElementRef; } @Component({ @@ -945,7 +945,7 @@ class ScrollableTooltipDemo { message: string = initialTooltipMessage; showButton: boolean = true; - @ViewChild(CdkScrollable) scrollingContainer: CdkScrollable; + @ViewChild(CdkScrollable, {static: false}) scrollingContainer: CdkScrollable; scrollDown() { const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement; @@ -1005,8 +1005,8 @@ class DynamicTooltipsDemo { `, }) class TooltipOnTextFields { - @ViewChild('input') input: ElementRef; - @ViewChild('textarea') textarea: ElementRef; + @ViewChild('input', {static: false}) input: ElementRef; + @ViewChild('textarea', {static: false}) textarea: ElementRef; } @Component({ @@ -1019,7 +1019,7 @@ class TooltipOnTextFields { `, }) class TooltipOnDraggableElement { - @ViewChild('button') button: ElementRef; + @ViewChild('button', {static: false}) button: ElementRef; } @Component({ @@ -1028,8 +1028,8 @@ class TooltipOnDraggableElement { }) class TooltipDemoWithoutPositionBinding { message: any = initialTooltipMessage; - @ViewChild(MatTooltip) tooltip: MatTooltip; - @ViewChild('button') button: ElementRef; + @ViewChild(MatTooltip, {static: false}) tooltip: MatTooltip; + @ViewChild('button', {static: false}) button: ElementRef; } /** Asserts whether a tooltip directive has a tooltip instance. */ diff --git a/src/lib/tree/tree.spec.ts b/src/lib/tree/tree.spec.ts index 3e0322bc2c36..49c76ccd0668 100644 --- a/src/lib/tree/tree.spec.ts +++ b/src/lib/tree/tree.spec.ts @@ -642,7 +642,7 @@ class SimpleMatTreeApp { underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { @@ -771,7 +771,7 @@ class NestedMatTreeApp { dataSource = new MatTreeNestedDataSource(); underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { @@ -807,7 +807,7 @@ class WhenNodeNestedMatTreeApp { dataSource = new MatTreeNestedDataSource(); underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { @@ -847,7 +847,7 @@ class MatTreeAppWithToggle { dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { @@ -878,7 +878,7 @@ class NestedMatTreeAppWithToggle { dataSource = new MatTreeNestedDataSource(); underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { @@ -922,7 +922,7 @@ class WhenNodeMatTreeApp { dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); underlyingDataSource = new FakeDataSource(); - @ViewChild(MatTree) tree: MatTree; + @ViewChild(MatTree, {static: false}) tree: MatTree; constructor() { this.underlyingDataSource.connect().subscribe(data => { diff --git a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts index b9be4c475961..629069287a1a 100644 --- a/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts +++ b/src/material-examples/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts @@ -18,7 +18,7 @@ import {TemplatePortal} from '@angular/cdk/portal'; styleUrls: ['cdk-drag-drop-root-element-example.css'], }) export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy { - @ViewChild(TemplateRef) _dialogTemplate: TemplateRef; + @ViewChild(TemplateRef, {static: false}) _dialogTemplate: TemplateRef; private _overlayRef: OverlayRef; private _portal: TemplatePortal; diff --git a/src/material-examples/cdk-portal-overview/cdk-portal-overview-example.ts b/src/material-examples/cdk-portal-overview/cdk-portal-overview-example.ts index f4acdbc2f519..d5a71d1a25ab 100644 --- a/src/material-examples/cdk-portal-overview/cdk-portal-overview-example.ts +++ b/src/material-examples/cdk-portal-overview/cdk-portal-overview-example.ts @@ -10,7 +10,7 @@ import {ComponentPortal, Portal, TemplatePortal} from '@angular/cdk/portal'; styleUrls: ['cdk-portal-overview-example.css'], }) export class CdkPortalOverviewExample implements AfterViewInit { - @ViewChild('templatePortalContent') templatePortalContent: TemplateRef; + @ViewChild('templatePortalContent', {static: false}) templatePortalContent: TemplateRef; selectedPortal: Portal; componentPortal: ComponentPortal; templatePortal: TemplatePortal; diff --git a/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts b/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts index 56169ef89fb3..51438e9cdcd6 100644 --- a/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts +++ b/src/material-examples/chips-autocomplete/chips-autocomplete-example.ts @@ -24,8 +24,8 @@ export class ChipsAutocompleteExample { fruits: string[] = ['Lemon']; allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry']; - @ViewChild('fruitInput') fruitInput: ElementRef; - @ViewChild('auto') matAutocomplete: MatAutocomplete; + @ViewChild('fruitInput', {static: false}) fruitInput: ElementRef; + @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete; constructor() { this.filteredFruits = this.fruitCtrl.valueChanges.pipe( diff --git a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts index eb628ccefcad..cc07d6fdac8f 100644 --- a/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts +++ b/src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts @@ -10,5 +10,5 @@ import {MatAccordion} from '@angular/material'; styleUrls: ['expansion-expand-collapse-all-example.css'], }) export class ExpansionExpandCollapseAllExample { - @ViewChild(MatAccordion) accordion: MatAccordion; + @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion; } diff --git a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts index 7277de6ff052..39b6707d46fc 100644 --- a/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts +++ b/src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts @@ -16,7 +16,7 @@ import { styleUrls: ['focus-monitor-focus-via-example.css'] }) export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit { - @ViewChild('monitored') monitoredEl: ElementRef; + @ViewChild('monitored', {static: false}) monitoredEl: ElementRef; origin = this.formatOrigin(null); diff --git a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts index 77495db67505..fa9129bcdba1 100644 --- a/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts +++ b/src/material-examples/focus-monitor-overview/focus-monitor-overview-example.ts @@ -16,8 +16,8 @@ import { styleUrls: ['focus-monitor-overview-example.css'] }) export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit { - @ViewChild('element') element: ElementRef; - @ViewChild('subtree') subtree: ElementRef; + @ViewChild('element', {static: false}) element: ElementRef; + @ViewChild('subtree', {static: false}) subtree: ElementRef; elementOrigin = this.formatOrigin(null); subtreeOrigin = this.formatOrigin(null); diff --git a/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts index db846639fc6e..ed5ccda0f633 100644 --- a/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts +++ b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts @@ -8,7 +8,7 @@ import {MatSidenav} from '@angular/material/sidenav'; styleUrls: ['sidenav-disable-close-example.css'], }) export class SidenavDisableCloseExample { - @ViewChild('sidenav') sidenav: MatSidenav; + @ViewChild('sidenav', {static: false}) sidenav: MatSidenav; reason = ''; diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index 4b0a7438af86..eb88bb44c0b9 100644 --- a/src/material-examples/table-http/table-http-example.ts +++ b/src/material-examples/table-http/table-http-example.ts @@ -21,8 +21,8 @@ export class TableHttpExample implements AfterViewInit { isLoadingResults = true; isRateLimitReached = false; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; + @ViewChild(MatSort, {static: false}) sort: MatSort; constructor(private http: HttpClient) {} diff --git a/src/material-examples/table-simple-column/table-simple-column-example.ts b/src/material-examples/table-simple-column/table-simple-column-example.ts index ddbdea733434..cbcd2dbd9f06 100644 --- a/src/material-examples/table-simple-column/table-simple-column-example.ts +++ b/src/material-examples/table-simple-column/table-simple-column-example.ts @@ -112,7 +112,7 @@ export class SimpleColumn implements OnDestroy, OnInit { @ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef; - @ViewChild(MatSortHeader) sortHeader: MatSortHeader; + @ViewChild(MatSortHeader, {static: false}) sortHeader: MatSortHeader; constructor(@Optional() public table: MatTable) {} diff --git a/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts index 241c4397cc64..145e58290f60 100644 --- a/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts +++ b/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts @@ -8,8 +8,8 @@ import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angul styleUrls: ['./text-field-autofill-monitor-example.css'], }) export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy { - @ViewChild('first', {read: ElementRef}) firstName: ElementRef; - @ViewChild('last', {read: ElementRef}) lastName: ElementRef; + @ViewChild('first', { read: ElementRef, static: false }) firstName: ElementRef; + @ViewChild('last', { read: ElementRef, static: false }) lastName: ElementRef; firstNameAutofilled: boolean; lastNameAutofilled: boolean; diff --git a/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts b/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts index a3154fbdb424..af33c8b31966 100644 --- a/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts +++ b/src/material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts @@ -11,7 +11,7 @@ import {take} from 'rxjs/operators'; export class TextFieldAutosizeTextareaExample { constructor(private ngZone: NgZone) {} - @ViewChild('autosize') autosize: CdkTextareaAutosize; + @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize; triggerResize() { // Wait for changes to be applied, then trigger textarea resize.