Skip to content

Commit 436cfd9

Browse files
crisbetocrisbeto
committed
master - c3188c84e feat(material/tabs): add the ability to keep content inside the DOM while off-screen (#20393)
1 parent e06649e commit 436cfd9

File tree

22 files changed

+237
-33
lines changed

22 files changed

+237
-33
lines changed

‎docs-content/api-docs/material-tabs.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -953,6 +953,22 @@ <h4 id="MatTabGroup" class="docs-header-link docs-api-h4 docs-api-class-name">
953953

954954

955955

956+
<tr class="docs-api-properties-row">
957+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
958+
@Input()</div><p class="docs-api-property-name">
959+
<code>preserveContent: boolean</code>
960+
</p>
961+
</td>
962+
<td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
963+
Setting this to <code>true</code> will keep it in the DOM which will prevent elements
964+
like iframes and videos from reloading next time it comes back into the view.</p>
965+
</td>
966+
</tr>
967+
968+
969+
970+
971+
956972
<tr class="docs-api-properties-row">
957973
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
958974
@Input()</div><p class="docs-api-property-name">
@@ -1252,6 +1268,21 @@ <h4 id="MatTabsConfig" class="docs-header-link docs-api-h4 docs-api-interface-na
12521268

12531269

12541270

1271+
1272+
1273+
<tr class="docs-api-properties-row">
1274+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
1275+
<code>preserveContent: boolean</code>
1276+
</p>
1277+
</td>
1278+
<td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
1279+
Setting this to <code>true</code> will keep it in the DOM which will prevent elements
1280+
like iframes and videos from reloading next time it comes back into the view.</p>
1281+
</td>
1282+
</tr>
1283+
1284+
1285+
12551286
</table>
12561287

12571288

‎docs-content/examples-highlighted/material/tabs/index-ts.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<span class="hljs-keyword">import</span> {TabGroupDynamicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-dynamic/tab-group-dynamic-example&#x27;</span>;
1818
<span class="hljs-keyword">import</span> {TabGroupHeaderBelowExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-header-below/tab-group-header-below-example&#x27;</span>;
1919
<span class="hljs-keyword">import</span> {TabGroupLazyLoadedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-lazy-loaded/tab-group-lazy-loaded-example&#x27;</span>;
20+
<span class="hljs-keyword">import</span> {TabGroupPreserveContentExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-preserve-content/tab-group-preserve-content-example&#x27;</span>;
2021
<span class="hljs-keyword">import</span> {TabGroupStretchedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-stretched/tab-group-stretched-example&#x27;</span>;
2122
<span class="hljs-keyword">import</span> {TabGroupThemeExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-theme/tab-group-theme-example&#x27;</span>;
2223
<span class="hljs-keyword">import</span> {TabNavBarBasicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-nav-bar-basic/tab-nav-bar-basic-example&#x27;</span>;
@@ -37,6 +38,7 @@
3738
TabGroupThemeExample,
3839
TabNavBarBasicExample,
3940
TabNavBarWithPanelExample,
41+
TabGroupPreserveContentExample,
4042
};
4143

4244
<span class="hljs-keyword">const</span> EXAMPLES = [
@@ -54,6 +56,7 @@
5456
TabGroupThemeExample,
5557
TabNavBarBasicExample,
5658
TabNavBarWithPanelExample,
59+
TabGroupPreserveContentExample,
5760
];
5861

5962
<span class="hljs-meta">@NgModule</span>({

‎docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-html.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Start the video in the first tab and navigate to the second one to see how it keeps playing.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
2+
3+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab-group</span> [<span class="hljs-attr">preserveContent</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
4+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;First&quot;</span>&gt;</span>
5+
<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
6+
<span class="hljs-attr">width</span>=<span class="hljs-string">&quot;560&quot;</span>
7+
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;315&quot;</span>
8+
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.youtube.com/embed/B-lipaiZII8&quot;</span>
9+
<span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
10+
<span class="hljs-attr">allow</span>=<span class="hljs-string">&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;</span>
11+
<span class="hljs-attr">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
12+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab</span>&gt;</span>
13+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Second&quot;</span>&gt;</span>Note how the video from the previous tab is still playing.<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab</span>&gt;</span>
14+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab-group</span>&gt;</span>

‎docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-ts.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
3+
<span class="hljs-comment">/**
4+
* <span class="hljs-doctag">@title </span>Tab group that keeps its content inside the DOM when it&#x27;s off-screen.
5+
*/</span>
6+
<span class="hljs-meta">@Component</span>({
7+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;tab-group-preserve-content-example&#x27;</span>,
8+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;tab-group-preserve-content-example.html&#x27;</span>,
9+
})
10+
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TabGroupPreserveContentExample</span> </span>{}

‎docs-content/examples-source/material/tabs/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {TabGroupHarnessExample} from './tab-group-harness/tab-group-harness-exam
1717
import {TabGroupDynamicExample} from './tab-group-dynamic/tab-group-dynamic-example';
1818
import {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-header-below-example';
1919
import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
20+
import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
2021
import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
2122
import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
2223
import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
@@ -37,6 +38,7 @@ export {
3738
TabGroupThemeExample,
3839
TabNavBarBasicExample,
3940
TabNavBarWithPanelExample,
41+
TabGroupPreserveContentExample,
4042
};
4143

4244
const EXAMPLES = [
@@ -54,6 +56,7 @@ const EXAMPLES = [
5456
TabGroupThemeExample,
5557
TabNavBarBasicExample,
5658
TabNavBarWithPanelExample,
59+
TabGroupPreserveContentExample,
5760
];
5861

5962
@NgModule({

‎docs-content/examples-source/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>
2+
3+
<mat-tab-group [preserveContent]="true">
4+
<mat-tab label="First">
5+
<iframe
6+
width="560"
7+
height="315"
8+
src="https://www.youtube.com/embed/B-lipaiZII8"
9+
frameborder="0"
10+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
11+
allowfullscreen></iframe>
12+
</mat-tab>
13+
<mat-tab label="Second">Note how the video from the previous tab is still playing.</mat-tab>
14+
</mat-tab-group>

‎docs-content/examples-source/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group that keeps its content inside the DOM when it's off-screen.
5+
*/
6+
@Component({
7+
selector: 'tab-group-preserve-content-example',
8+
templateUrl: 'tab-group-preserve-content-example.html',
9+
})
10+
export class TabGroupPreserveContentExample {}

‎docs-content/overviews/material/tabs/tabs.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,18 @@ <h3 id="controlling-the-tab-animation" class="docs-header-link">
9696
region="slow-animation-duration"></div>
9797

9898

99+
<h3 id="keeping-the-tab-content-inside-the-dom-while-its-off-screen" class="docs-header-link">
100+
<span header-link="keeping-the-tab-content-inside-the-dom-while-its-off-screen"></span>
101+
Keeping the tab content inside the DOM while it&#39;s off-screen
102+
</h3>
103+
<p>By default the <code>&lt;mat-tab-group&gt;</code> will remove the content of off-screen tabs from the DOM until they
104+
come into the view. This is optimal for most cases since it keeps the DOM size smaller, but it
105+
isn&#39;t great for others like when a tab has an <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element, because the content
106+
will be re-initialized whenever the user navigates to the tab. If you want to keep the content of
107+
off-screen tabs in the DOM, you can set the <code>preserveContent</code> input to <code>true</code>.</p>
108+
<div material-docs-example="tab-group-preserve-content"></div>
109+
110+
99111
<h3 id="accessibility" class="docs-header-link">
100112
<span header-link="accessibility"></span>
101113
Accessibility

‎esm2020/example-module.mjs

Lines changed: 17 additions & 1 deletion
Large diffs are not rendered by default.

‎esm2020/material/tabs/index.mjs

Lines changed: 8 additions & 4 deletions
Large diffs are not rendered by default.

‎esm2020/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.mjs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
import * as i0 from "@angular/core";
3+
import * as i1 from "@angular/material/tabs";
4+
/**
5+
* @title Tab group that keeps its content inside the DOM when it's off-screen.
6+
*/
7+
export class TabGroupPreserveContentExample {
8+
}
9+
TabGroupPreserveContentExample.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
10+
TabGroupPreserveContentExample.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: TabGroupPreserveContentExample, selector: "tab-group-preserve-content-example", ngImport: i0, template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n <mat-tab label=\"First\">\n <iframe\n width=\"560\"\n height=\"315\"\n src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen></iframe>\n </mat-tab>\n <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n", components: [{ type: i1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }] });
11+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, decorators: [{
12+
type: Component,
13+
args: [{ selector: 'tab-group-preserve-content-example', template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n <mat-tab label=\"First\">\n <iframe\n width=\"560\"\n height=\"315\"\n src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen></iframe>\n </mat-tab>\n <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n" }]
14+
}] });
15+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWdyb3VwLXByZXNlcnZlLWNvbnRlbnQtZXhhbXBsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLWV4YW1wbGVzL21hdGVyaWFsL3RhYnMvdGFiLWdyb3VwLXByZXNlcnZlLWNvbnRlbnQvdGFiLWdyb3VwLXByZXNlcnZlLWNvbnRlbnQtZXhhbXBsZS50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzLWV4YW1wbGVzL21hdGVyaWFsL3RhYnMvdGFiLWdyb3VwLXByZXNlcnZlLWNvbnRlbnQvdGFiLWdyb3VwLXByZXNlcnZlLWNvbnRlbnQtZXhhbXBsZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7OztBQUV4Qzs7R0FFRztBQUtILE1BQU0sT0FBTyw4QkFBOEI7O2dJQUE5Qiw4QkFBOEI7b0hBQTlCLDhCQUE4QiwwRUNUM0Msd2pCQWNBO2dHRExhLDhCQUE4QjtrQkFKMUMsU0FBUzsrQkFDRSxvQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogQHRpdGxlIFRhYiBncm91cCB0aGF0IGtlZXBzIGl0cyBjb250ZW50IGluc2lkZSB0aGUgRE9NIHdoZW4gaXQncyBvZmYtc2NyZWVuLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0YWItZ3JvdXAtcHJlc2VydmUtY29udGVudC1leGFtcGxlJyxcbiAgdGVtcGxhdGVVcmw6ICd0YWItZ3JvdXAtcHJlc2VydmUtY29udGVudC1leGFtcGxlLmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJHcm91cFByZXNlcnZlQ29udGVudEV4YW1wbGUge31cbiIsIjxwPlN0YXJ0IHRoZSB2aWRlbyBpbiB0aGUgZmlyc3QgdGFiIGFuZCBuYXZpZ2F0ZSB0byB0aGUgc2Vjb25kIG9uZSB0byBzZWUgaG93IGl0IGtlZXBzIHBsYXlpbmcuPC9wPlxuXG48bWF0LXRhYi1ncm91cCBbcHJlc2VydmVDb250ZW50XT1cInRydWVcIj5cbiAgPG1hdC10YWIgbGFiZWw9XCJGaXJzdFwiPlxuICAgIDxpZnJhbWVcbiAgICAgIHdpZHRoPVwiNTYwXCJcbiAgICAgIGhlaWdodD1cIjMxNVwiXG4gICAgICBzcmM9XCJodHRwczovL3d3dy55b3V0dWJlLmNvbS9lbWJlZC9CLWxpcGFpWklJOFwiXG4gICAgICBmcmFtZWJvcmRlcj1cIjBcIlxuICAgICAgYWxsb3c9XCJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZVwiXG4gICAgICBhbGxvd2Z1bGxzY3JlZW4+PC9pZnJhbWU+XG4gIDwvbWF0LXRhYj5cbiAgPG1hdC10YWIgbGFiZWw9XCJTZWNvbmRcIj5Ob3RlIGhvdyB0aGUgdmlkZW8gZnJvbSB0aGUgcHJldmlvdXMgdGFiIGlzIHN0aWxsIHBsYXlpbmcuPC9tYXQtdGFiPlxuPC9tYXQtdGFiLWdyb3VwPlxuIl19

‎fesm2015/components-examples.mjs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4844,6 +4844,22 @@ const EXAMPLE_COMPONENTS = {
48444844
"importSpecifier": "material/tabs"
48454845
}
48464846
},
4847+
"tab-group-preserve-content": {
4848+
"packagePath": "material/tabs/tab-group-preserve-content",
4849+
"title": "Tab group that keeps its content inside the DOM when it's off-screen.",
4850+
"componentName": "TabGroupPreserveContentExample",
4851+
"files": [
4852+
"tab-group-preserve-content-example.ts",
4853+
"tab-group-preserve-content-example.html"
4854+
],
4855+
"selector": "tab-group-preserve-content-example",
4856+
"additionalComponents": [],
4857+
"primaryFile": "tab-group-preserve-content-example.ts",
4858+
"module": {
4859+
"name": "TabGroupExamplesModule",
4860+
"importSpecifier": "material/tabs"
4861+
}
4862+
},
48474863
"tab-group-stretched": {
48484864
"packagePath": "material/tabs/tab-group-stretched",
48494865
"title": "Tab group with stretched labels",

‎fesm2015/components-examples.mjs.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fesm2015/material/tabs.mjs

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
172172
args: [{ selector: 'tab-group-lazy-loaded-example', template: "<mat-tab-group>\n<!-- #docregion mat-tab-content -->\n <mat-tab label=\"First\">\n <ng-template matTabContent>\n Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}\n </ng-template>\n </mat-tab>\n<!-- #enddocregion mat-tab-content -->\n <mat-tab label=\"Second\">\n <ng-template matTabContent>\n Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}\n </ng-template>\n </mat-tab>\n <mat-tab label=\"Third\">\n <ng-template matTabContent>\n Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}\n </ng-template>\n </mat-tab>\n</mat-tab-group>\n" }]
173173
}] });
174174

175+
/**
176+
* @title Tab group that keeps its content inside the DOM when it's off-screen.
177+
*/
178+
class TabGroupPreserveContentExample {
179+
}
180+
TabGroupPreserveContentExample.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
181+
TabGroupPreserveContentExample.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: TabGroupPreserveContentExample, selector: "tab-group-preserve-content-example", ngImport: i0, template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n <mat-tab label=\"First\">\n <iframe\n width=\"560\"\n height=\"315\"\n src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen></iframe>\n </mat-tab>\n <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n", components: [{ type: i1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }] });
182+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupPreserveContentExample, decorators: [{
183+
type: Component,
184+
args: [{ selector: 'tab-group-preserve-content-example', template: "<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>\n\n<mat-tab-group [preserveContent]=\"true\">\n <mat-tab label=\"First\">\n <iframe\n width=\"560\"\n height=\"315\"\n src=\"https://www.youtube.com/embed/B-lipaiZII8\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen></iframe>\n </mat-tab>\n <mat-tab label=\"Second\">Note how the video from the previous tab is still playing.</mat-tab>\n</mat-tab-group>\n" }]
185+
}] });
186+
175187
/**
176188
* @title Tab group with stretched labels
177189
*/
@@ -250,6 +262,7 @@ const EXAMPLES = [
250262
TabGroupThemeExample,
251263
TabNavBarBasicExample,
252264
TabNavBarWithPanelExample,
265+
TabGroupPreserveContentExample,
253266
];
254267
class TabGroupExamplesModule {
255268
}
@@ -267,7 +280,8 @@ TabGroupExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
267280
TabGroupStretchedExample,
268281
TabGroupThemeExample,
269282
TabNavBarBasicExample,
270-
TabNavBarWithPanelExample], imports: [CommonModule,
283+
TabNavBarWithPanelExample,
284+
TabGroupPreserveContentExample], imports: [CommonModule,
271285
MatButtonModule,
272286
MatButtonToggleModule,
273287
MatCheckboxModule,
@@ -287,7 +301,8 @@ TabGroupExamplesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
287301
TabGroupStretchedExample,
288302
TabGroupThemeExample,
289303
TabNavBarBasicExample,
290-
TabNavBarWithPanelExample] });
304+
TabNavBarWithPanelExample,
305+
TabGroupPreserveContentExample] });
291306
TabGroupExamplesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: TabGroupExamplesModule, imports: [[
292307
CommonModule,
293308
MatButtonModule,
@@ -320,5 +335,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ng
320335
* Generated bundle index. Do not edit.
321336
*/
322337

323-
export { TabGroupAlignExample, TabGroupAnimationsExample, TabGroupAsyncExample, TabGroupBasicExample, TabGroupCustomLabelExample, TabGroupDynamicExample, TabGroupDynamicHeightExample, TabGroupExamplesModule, TabGroupHarnessExample, TabGroupHeaderBelowExample, TabGroupLazyLoadedExample, TabGroupStretchedExample, TabGroupThemeExample, TabNavBarBasicExample, TabNavBarWithPanelExample };
338+
export { TabGroupAlignExample, TabGroupAnimationsExample, TabGroupAsyncExample, TabGroupBasicExample, TabGroupCustomLabelExample, TabGroupDynamicExample, TabGroupDynamicHeightExample, TabGroupExamplesModule, TabGroupHarnessExample, TabGroupHeaderBelowExample, TabGroupLazyLoadedExample, TabGroupPreserveContentExample, TabGroupStretchedExample, TabGroupThemeExample, TabNavBarBasicExample, TabNavBarWithPanelExample };
324339
//# sourceMappingURL=tabs.mjs.map

‎fesm2015/material/tabs.mjs.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)