refactor(material/tabs): fix strict property initialization errors

Updates the code to be compatible with strict property initialization.

Author: crisbeto

src/material/tabs/ink-bar.ts

@@ -75,8 +75,8 @@ export class MatInkBar {
 @Directive()
 export abstract class InkBarItem implements OnInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private _inkBarElement: HTMLElement | null;
-  private _inkBarContentElement: HTMLElement | null;
+  private _inkBarElement: HTMLElement | null = null;
+  private _inkBarContentElement: HTMLElement | null = null;
   private _fitToContent = false;
 
   /** Whether the ink bar should fit to the entire tab or just its content. */

src/material/tabs/paginated-tab-header.ts

@@ -113,16 +113,16 @@ export abstract class MatPaginatedTabHeader
    * The number of tab labels that are displayed on the header. When this changes, the header
    * should re-evaluate the scroll position.
    */
-  private _tabLabelCount: number;
+  private _tabLabelCount!: number;
 
   /** Whether the scroll distance has changed and should be applied after the view is checked. */
-  private _scrollDistanceChanged: boolean;
+  private _scrollDistanceChanged = false;
 
   /** Used to manage focus between the tabs. */
   protected _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem> | undefined;
 
   /** Cached text content of the header. */
-  private _currentTextContent: string;
+  private _currentTextContent!: string;
 
   /** Stream that will stop the automated scrolling. */
   private _stopScrolling = new Subject<void>();

src/material/tabs/tab-body.spec.ts

@@ -139,10 +139,10 @@ describe('MatTabBody', () => {
 })
 class SimpleTabBodyApp implements AfterViewInit {
   content = signal<TemplatePortal | undefined>(undefined);
-  position: number;
+  position!: number;
 
-  @ViewChild(MatTabBody) tabBody: MatTabBody;
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild(MatTabBody) tabBody!: MatTabBody;
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
 
   private readonly _viewContainerRef = inject(ViewContainerRef);
 

src/material/tabs/tab-body.ts

@@ -141,17 +141,17 @@ export class MatTabBody implements OnInit, OnDestroy {
   private _renderer = inject(Renderer2);
   private _diAnimationsDisabled = _animationsDisabled();
   private _eventCleanups?: (() => void)[];
-  private _initialized: boolean;
-  private _fallbackTimer: ReturnType<typeof setTimeout>;
+  private _initialized = false;
+  private _fallbackTimer: ReturnType<typeof setTimeout> | undefined;
 
   /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
-  private _positionIndex: number;
+  private _positionIndex!: number;
 
   /** Subscription to the directionality change observable. */
   private _dirChangeSubscription = Subscription.EMPTY;
 
   /** Current position of the body within the tab group. */
-  _position: MatTabBodyPositionState;
+  _position!: MatTabBodyPositionState;
 
   /** Previous position of the body. */
   protected _previousPosition: MatTabBodyPositionState | undefined;
@@ -169,13 +169,13 @@ export class MatTabBody implements OnInit, OnDestroy {
   @Output() readonly _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
   /** The portal host inside of this container into which the tab body content will be loaded. */
-  @ViewChild(MatTabBodyPortal) _portalHost: MatTabBodyPortal;
+  @ViewChild(MatTabBodyPortal) _portalHost!: MatTabBodyPortal;
 
   /** Element in which the content is rendered. */
   @ViewChild('content') _contentElement: ElementRef<HTMLElement> | undefined;
 
   /** The tab body content to display. */
-  @Input('content') _content: TemplatePortal;
+  @Input('content') _content!: TemplatePortal;
 
   // Note that the default value will always be overwritten by `MatTabBody`, but we need one
   // anyway to prevent the animations module from throwing an error if the body is used on its own.

src/material/tabs/tab-group.spec.ts

@@ -1246,16 +1246,16 @@ describe('MatTabGroup labels aligned with a config', () => {
   imports: [MatTabsModule],
 })
 class SimpleTabsTestApp {
-  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
-  @ViewChildren(MatTab) tabs: QueryList<MatTab>;
+  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
+  @ViewChildren(MatTab) tabs!: QueryList<MatTab>;
   selectedIndex: number = 1;
   focusEvent: any;
   selectEvent: any;
   disableRipple: boolean = false;
   contentTabIndex: number | null = null;
   headerPosition: MatTabHeaderPosition = 'above';
-  ariaLabel: string;
-  ariaLabelledby: string;
+  ariaLabel!: string;
+  ariaLabelledby!: string;
   secondTabId: string | null = null;
   handleFocus(event: any) {
     this.focusEvent = event;
@@ -1347,7 +1347,7 @@ class BindedTabsTestApp {
   imports: [MatTabsModule],
 })
 class DisabledTabsTestApp {
-  @ViewChildren(MatTab) tabs: QueryList<MatTab>;
+  @ViewChildren(MatTab) tabs!: QueryList<MatTab>;
   isDisabled = false;
 }
 
@@ -1370,7 +1370,7 @@ class AsyncTabsTestApp implements OnInit {
     {label: 'two', content: 'two'},
   ];
 
-  tabs: Observable<any>;
+  tabs!: Observable<any>;
 
   ngOnInit() {
     // Use ngOnInit because there is some issue with scheduling the async task in the constructor.
@@ -1414,7 +1414,7 @@ class TabGroupWithSimpleApi {
   imports: [MatTabsModule],
 })
 class NestedTabs {
-  @ViewChildren(MatTabGroup) groups: QueryList<MatTabGroup>;
+  @ViewChildren(MatTabGroup) groups!: QueryList<MatTabGroup>;
 }
 
 @Component({
@@ -1443,8 +1443,8 @@ class TemplateTabs {}
   imports: [MatTabsModule],
 })
 class TabGroupWithAriaInputs {
-  ariaLabel: string;
-  ariaLabelledby: string;
+  ariaLabel!: string;
+  ariaLabelledby!: string;
 }
 
 @Component({
@@ -1485,7 +1485,7 @@ class TabsWithCustomAnimationDuration {}
   imports: [MatTabsModule],
 })
 class TabGroupWithIndirectDescendantTabs {
-  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
+  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
 }
 
 @Component({
@@ -1520,7 +1520,7 @@ class TabGroupWithInkBarFitToContent {
   imports: [MatTabsModule],
 })
 class TabGroupWithSpaceAbove {
-  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
+  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
 }
 
 @Component({
@@ -1559,8 +1559,8 @@ class NestedTabGroupWithLabel {}
   imports: [MatTabsModule],
 })
 class TabsWithClassesTestApp {
-  labelClassList: string | string[];
-  bodyClassList: string | string[];
+  labelClassList!: string | string[];
+  bodyClassList!: string | string[];
 }
 
 @Component({

src/material/tabs/tab-group.ts

@@ -105,10 +105,10 @@ export class MatTabGroup
    * All tabs inside the tab group. This includes tabs that belong to groups that are nested
    * inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
    */
-  @ContentChildren(MatTab, {descendants: true}) _allTabs: QueryList<MatTab>;
+  @ContentChildren(MatTab, {descendants: true}) _allTabs!: QueryList<MatTab>;
   @ViewChildren(MatTabBody) _tabBodies: QueryList<MatTabBody> | undefined;
-  @ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef;
-  @ViewChild('tabHeader') _tabHeader: MatTabHeader;
+  @ViewChild('tabBodyWrapper') _tabBodyWrapper!: ElementRef;
+  @ViewChild('tabHeader') _tabHeader!: MatTabHeader;
 
   /** All of the tabs that belong to the group. */
   _tabs: QueryList<MatTab> = new QueryList<MatTab>();
@@ -177,7 +177,7 @@ export class MatTabGroup
     const stringValue = value + '';
     this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
   }
-  private _animationDuration: string;
+  private _animationDuration!: string;
 
   /**
    * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
@@ -194,7 +194,7 @@ export class MatTabGroup
     this._contentTabIndex = isNaN(value) ? null : value;
   }
 
-  private _contentTabIndex: number | null;
+  private _contentTabIndex: number | null = null;
 
   /**
    * Whether pagination should be disabled. This can be used to avoid unnecessary
@@ -246,13 +246,13 @@ export class MatTabGroup
     this._backgroundColor = value;
   }
 
-  private _backgroundColor: ThemePalette;
+  private _backgroundColor!: ThemePalette;
 
   /** Aria label of the inner `tablist` of the group. */
-  @Input('aria-label') ariaLabel: string;
+  @Input('aria-label') ariaLabel!: string;
 
   /** Sets the `aria-labelledby` of the inner `tablist` of the group. */
-  @Input('aria-labelledby') ariaLabelledby: string;
+  @Input('aria-labelledby') ariaLabelledby!: string;
 
   /** Output to enable support for two-way binding on `[(selectedIndex)]` */
   @Output() readonly selectedIndexChange: EventEmitter<number> = new EventEmitter<number>();
@@ -589,7 +589,7 @@ export class MatTabGroup
 /** A simple change event emitted on focus or selection changes. */
 export class MatTabChangeEvent {
   /** Index of the currently-selected tab. */
-  index: number;
+  index!: number;
   /** Reference to the currently-selected tab. */
-  tab: MatTab;
+  tab!: MatTab;
 }

src/material/tabs/tab-header.spec.ts

@@ -743,13 +743,13 @@ interface Tab {
 class SimpleTabHeaderApp {
   disableRipple: boolean = false;
   selectedIndex: number = 0;
-  focusedIndex: number;
+  focusedIndex!: number;
   disabledTabIndex = 1;
   tabs: Tab[] = [{label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}];
   dir: Direction = 'ltr';
-  disablePagination: boolean;
+  disablePagination: boolean = false;
 
-  @ViewChild(MatTabHeader, {static: true}) tabHeader: MatTabHeader;
+  @ViewChild(MatTabHeader, {static: true}) tabHeader!: MatTabHeader;
 
   private readonly _changeDetectorRef = inject(ChangeDetectorRef);
 

src/material/tabs/tab-header.ts

@@ -52,19 +52,19 @@ export class MatTabHeader
   extends MatPaginatedTabHeader
   implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy
 {
-  @ContentChildren(MatTabLabelWrapper, {descendants: false}) _items: QueryList<MatTabLabelWrapper>;
-  @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
-  @ViewChild('tabList', {static: true}) _tabList: ElementRef;
-  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
-  @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
-  @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
-  _inkBar: MatInkBar;
+  @ContentChildren(MatTabLabelWrapper, {descendants: false}) _items!: QueryList<MatTabLabelWrapper>;
+  @ViewChild('tabListContainer', {static: true}) _tabListContainer!: ElementRef;
+  @ViewChild('tabList', {static: true}) _tabList!: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner!: ElementRef;
+  @ViewChild('nextPaginator') _nextPaginator!: ElementRef<HTMLElement>;
+  @ViewChild('previousPaginator') _previousPaginator!: ElementRef<HTMLElement>;
+  _inkBar!: MatInkBar;
 
   /** Aria label of the header. */
-  @Input('aria-label') ariaLabel: string;
+  @Input('aria-label') ariaLabel!: string;
 
   /** Sets the `aria-labelledby` of the header. */
-  @Input('aria-labelledby') ariaLabelledby: string;
+  @Input('aria-labelledby') ariaLabelledby!: string;
 
   /** Whether the ripple effect is disabled or not. */
   @Input({transform: booleanAttribute})

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -554,8 +554,8 @@ describe('MatTabNavBar with enabled animations', () => {
   imports: [MatTabsModule],
 })
 class SimpleTabNavBarTestApp {
-  @ViewChild(MatTabNav) tabNavBar: MatTabNav;
-  @ViewChildren(MatTabLink) tabLinks: QueryList<MatTabLink>;
+  @ViewChild(MatTabNav) tabNavBar!: MatTabNav;
+  @ViewChildren(MatTabLink) tabLinks!: QueryList<MatTabLink>;
 
   label = '';
   disabled = false;

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -99,10 +99,11 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
     this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
   }
 
-  private _animationDuration: string;
+  private _animationDuration!: string;
 
   /** Query list of all tab links of the tab navigation. */
-  @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;
+  @ContentChildren(forwardRef(() => MatTabLink), {descendants: true})
+  _items!: QueryList<MatTabLink>;
 
   /**
    * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
@@ -155,12 +156,12 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit
    */
   @Input() tabPanel?: MatTabNavPanel;
 
-  @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef;
-  @ViewChild('tabList', {static: true}) _tabList: ElementRef;
-  @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef;
-  @ViewChild('nextPaginator') _nextPaginator: ElementRef<HTMLElement>;
-  @ViewChild('previousPaginator') _previousPaginator: ElementRef<HTMLElement>;
-  _inkBar: MatInkBar;
+  @ViewChild('tabListContainer', {static: true}) _tabListContainer!: ElementRef;
+  @ViewChild('tabList', {static: true}) _tabList!: ElementRef;
+  @ViewChild('tabListInner', {static: true}) _tabListInner!: ElementRef;
+  @ViewChild('nextPaginator') _nextPaginator!: ElementRef<HTMLElement>;
+  @ViewChild('previousPaginator') _previousPaginator!: ElementRef<HTMLElement>;
+  _inkBar!: MatInkBar;
 
   constructor(...args: unknown[]);