Updated Angular Material examples

src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html

@@ -0,0 +1,17 @@
+<mat-tab-group>
+  <mat-tab label="First">
+    <ng-template matTabContent>
+      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Second">
+    <ng-template matTabContent>
+      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Third">
+    <ng-template matTabContent>
+      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>

src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group where the tab content is loaded lazily (when activated)
+ */
+@Component({
+  selector: 'tab-group-lazy-loaded-example',
+  templateUrl: 'tab-group-lazy-loaded-example.html',
+  styleUrls: ['tab-group-lazy-loaded-example.css'],
+})
+export class TabGroupLazyLoadedExample {
+  tabLoadTimes: Date[] = [];
+
+  getTimeLoaded(index: number) {
+    if (!this.tabLoadTimes[index]) {
+      this.tabLoadTimes[index] = new Date();
+    }
+
+    return this.tabLoadTimes[index];
+  }
+}