fix: copy to clipboard button always copying content of first tab (#821)

There were a couple of issues that were causing the "Copy to clipboard" button to copy the content of the first tab:
1. It was hardcoded to look at the first `snippet` component.
2. Even if we were using the `selectedTab` to get a reference to the open tab content, it wouldn't have worked because we kept setting the `selectedTab` based on the passed in `file`. These changes make it so the tab group propagates its selected index back to the `selectedTab`.

Fixes #19867.

Author: crisbeto

material.angular.io/src/app/shared/example-viewer/example-viewer.html

@@ -21,10 +21,10 @@
   </div>
 
   <div class="docs-example-viewer-source" *ngIf="view === 'full'">
-    <mat-tab-group animationDuration="0ms" [selectedIndex]="selectedTab" (selectedIndexChange)="selectCorrectTab()">
+    <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
       <mat-tab *ngFor="let tabName of _getExampleTabNames()" [label]="tabName">
         <div class="button-bar">
-          <button mat-icon-button type="button" (click)="copySource(snippet.first.viewer.textContent)"
+          <button mat-icon-button type="button" (click)="copySource(snippet.toArray()[selectedTab].viewer.textContent)"
                   class="docs-example-source-copy docs-example-button" [matTooltip]="'Copy example source'"
                   title="Copy example source" aria-label="Copy example source to clipboard">
             <mat-icon>content_copy</mat-icon>

material.angular.io/src/app/shared/example-viewer/example-viewer.ts

@@ -26,7 +26,7 @@ export class ExampleViewer implements OnInit {
   @ViewChildren(CodeSnippet) readonly snippet: QueryList<CodeSnippet>;
 
   /** The tab to jump to when expanding from snippet view. */
-  selectedTab: number;
+  selectedTab: number = 0;
 
   /** Map of example files that should be displayed in the view-source tab. */
   exampleTabs: {[tabName: string]: string};
@@ -118,12 +118,15 @@ export class ExampleViewer implements OnInit {
   }
 
   generateUrl(file: string): string {
+    const lastDotIndex = file.lastIndexOf('.');
+    const contentBeforeDot = file.substring(0, lastDotIndex);
+    const contentAfterDot = file.substring(lastDotIndex + 1);
     let fileName: string;
-    const last = file.lastIndexOf('.');
+
     if (this.region) {
-      fileName = file.substring(0, last) + '_' + this.region + '-' + file.substring(last + 1) + '.html';
+      fileName = `${contentBeforeDot}_${this.region}-${contentAfterDot}.html`;
     } else {
-      fileName = file.substring(0, last) + '-' + file.substring(last + 1) + '.html';
+      fileName = `${contentBeforeDot}-${contentAfterDot}.html`;
     }
 
     const examplePath = `${this.exampleData.module.importSpecifier}/${this.example}`;
@@ -166,7 +169,7 @@ export class ExampleViewer implements OnInit {
 
     const additionalFiles = this.exampleData.additionalFiles || [];
 
-    additionalFiles.forEach(fileName => {
+    additionalFiles.forEach((fileName: string) => {
       // Since the additional files refer to the original file name, we need to transform
       // the file name to match the highlighted HTML file that displays the source.
       const fileSourceName = fileName.replace(fileExtensionRegex, '$1-$2.html');