refactor(material/tabs): fix circular dependencies

Author: jamOne-

src/material/tabs/public-api.ts

@@ -16,8 +16,10 @@ export {
 } from './tab-body';
 export {MatTabsConfig, MAT_TABS_CONFIG} from './tab-config';
 export {MatTabContent, MAT_TAB_CONTENT} from './tab-content';
-export {MatTabLabel, MAT_TAB, MAT_TAB_LABEL} from './tab-label';
-export {MatTab, MAT_TAB_GROUP} from './tab';
+export {MatTabLabel, MAT_TAB_LABEL} from './tab-label';
+export {MatTab} from './tab';
+export {MAT_TAB, MatTabBase} from './tab-token';
+export {MAT_TAB_GROUP, MatTabGroupBase} from './tab-group-token';
 export {
   MatInkBar,
   _MatInkBarPositioner,

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

@@ -0,0 +1,13 @@
+import {InjectionToken} from '@angular/core';
+
+/**
+ * Used to provide a tab group without causing a circular dependency.
+ * @docs-private
+ */
+export interface MatTabGroupBase {}
+
+/**
+ * Used to provide a tab group without causing a circular dependency.
+ * @docs-private
+ */
+export const MAT_TAB_GROUP = new InjectionToken<MatTabGroupBase>('MAT_TAB_GROUP');

src/material/tabs/tab-group.ts

@@ -28,7 +28,7 @@ import {
   AfterViewInit,
   NgZone,
 } from '@angular/core';
-import {MAT_TAB_GROUP, MatTab} from './tab';
+import {MatTab} from './tab';
 import {MatTabHeader} from './tab-header';
 import {ThemePalette, MatRipple, _animationsDisabled} from '../core';
 import {merge, Subscription} from 'rxjs';
@@ -39,6 +39,7 @@ import {MatTabBody} from './tab-body';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {Platform} from '@angular/cdk/platform';
+import {MAT_TAB_GROUP} from './tab-group-token';
 
 /** @docs-private */
 export interface MatTabGroupBaseHeader {

src/material/tabs/tab-label.ts

@@ -8,7 +8,7 @@
 
 import {Directive, InjectionToken, inject} from '@angular/core';
 import {CdkPortal} from '@angular/cdk/portal';
-import {type MatTab} from './tab';
+import {MAT_TAB} from './tab-token';
 
 /**
  * Injection token that can be used to reference instances of `MatTabLabel`. It serves as
@@ -17,12 +17,6 @@ import {type MatTab} from './tab';
  */
 export const MAT_TAB_LABEL = new InjectionToken<MatTabLabel>('MatTabLabel');
 
-/**
- * Used to provide a tab label to a tab without causing a circular dependency.
- * @docs-private
- */
-export const MAT_TAB = new InjectionToken<MatTab>('MAT_TAB');
-
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
   selector: '[mat-tab-label], [matTabLabel]',

src/material/tabs/tab-token.ts

@@ -0,0 +1,13 @@
+import {InjectionToken} from '@angular/core';
+
+/**
+ * Used to provide a tab without causing a circular dependency.
+ * @docs-private
+ */
+export interface MatTabBase {}
+
+/**
+ * Used to provide a tab without causing a circular dependency.
+ * @docs-private
+ */
+export const MAT_TAB = new InjectionToken<MatTabBase>('MAT_TAB');

src/material/tabs/tab.ts

@@ -24,18 +24,13 @@ import {
   inject,
 } from '@angular/core';
 import {MatTabContent} from './tab-content';
-import {MAT_TAB, MatTabLabel} from './tab-label';
+import {MatTabLabel} from './tab-label';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {Subject} from 'rxjs';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {_StructuralStylesLoader} from '../core';
-import {type MatTabGroup} from './tab-group';
-
-/**
- * Used to provide a tab group to a tab without causing a circular dependency.
- * @docs-private
- */
-export const MAT_TAB_GROUP = new InjectionToken<MatTabGroup>('MAT_TAB_GROUP');
+import {MAT_TAB, MatTabBase} from './tab-token';
+import {MAT_TAB_GROUP} from './tab-group-token';
 
 @Component({
   selector: 'mat-tab',
@@ -57,7 +52,7 @@ export const MAT_TAB_GROUP = new InjectionToken<MatTabGroup>('MAT_TAB_GROUP');
     '[attr.id]': 'null',
   },
 })
-export class MatTab implements OnInit, OnChanges, OnDestroy {
+export class MatTab implements MatTabBase, OnInit, OnChanges, OnDestroy {
   private _viewContainerRef = inject(ViewContainerRef);
   _closestTabGroup = inject(MAT_TAB_GROUP, {optional: true});
 
@@ -79,11 +74,10 @@ export class MatTab implements OnInit, OnChanges, OnDestroy {
    * Template provided in the tab content that will be used if present, used to enable lazy-loading
    */
   @ContentChild(MatTabContent, {read: TemplateRef, static: true})
-  // The value will be set in `ngAfterViewInit`.
   private _explicitContent?: TemplateRef<unknown>;
 
   /** Template inside the MatTab view that contains an `<ng-content>`. */
-  @ViewChild(TemplateRef, {static: true}) _implicitContent: TemplateRef<unknown>;
+  @ViewChild(TemplateRef, {static: true}) _implicitContent?: TemplateRef<unknown>;
 
   /** Plain text label for the tab, used when there is no template label. */
   @Input('label') textLabel: string = '';
@@ -155,7 +149,7 @@ export class MatTab implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit(): void {
     this._contentPortal = new TemplatePortal(
-      this._explicitContent || this._implicitContent,
+      this._explicitContent || this._implicitContent!,
       this._viewContainerRef,
     );
   }