refactor: update snippets/embedded example comments in material docs md to reflect new API (chips, menu, tabs) (#19486)

* mark regions and change docs for chips, menu and tabs

* add space after colon in object literal

Co-authored-by: Annie Wang <[email protected]>

Author: annieyw

src/components-examples/material/menu/menu-nested/menu-nested-example.html

@@ -1,5 +1,5 @@
 <button mat-button [matMenuTriggerFor]="animals">Animal index</button>
-
+<!-- #docregion sub-menu -->
 <mat-menu #animals="matMenu">
   <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
   <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
@@ -12,6 +12,7 @@
   <button mat-menu-item>Birds</button>
   <button mat-menu-item>Mammals</button>
 </mat-menu>
+<!-- #enddocregion sub-menu -->
 
 <mat-menu #invertebrates="matMenu">
   <button mat-menu-item>Insects</button>

src/components-examples/material/menu/menu-overview/menu-overview-example.html

@@ -1,4 +1,6 @@
+<!-- #docregion mat-menu-trigger-for -->
 <button mat-button [matMenuTriggerFor]="menu">Menu</button>
+<!-- #enddocregion mat-menu-trigger-for -->
 <mat-menu #menu="matMenu">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>

src/components-examples/material/menu/menu-position/menu-position-example.html

@@ -1,5 +1,7 @@
 <button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
+<!-- #docregion menu-position -->
 <mat-menu #aboveMenu="matMenu" yPosition="above">
+<!-- #enddocregion menu-position -->
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html

@@ -1,4 +1,6 @@
+<!-- #docregion align-start -->
 <mat-tab-group mat-align-tabs="start">
+<!-- #enddocregion align-start -->
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>

src/components-examples/material/tabs/tab-group-animations/tab-group-animations-example.html

@@ -7,7 +7,9 @@ <h3>No animation</h3>
 </mat-tab-group>
 
 <h3>Very slow animation</h3>
+<!-- #docregion slow-animation-duration -->
 <mat-tab-group animationDuration="2000ms">
+<!-- #enddocregion slow-animation-duration -->
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>

src/components-examples/material/tabs/tab-group-custom-label/tab-group-custom-label-example.html

@@ -1,9 +1,11 @@
 <mat-tab-group>
   <mat-tab>
+<!-- #docregion label-directive -->
     <ng-template mat-tab-label>
       <mat-icon class="example-tab-icon">thumb_up</mat-icon>
       First
     </ng-template>
+<!-- #enddocregion label-directive -->
     Content 1
   </mat-tab>
 

src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.html

@@ -1,4 +1,6 @@
+<!-- #docregion dynamic-height -->
 <mat-tab-group dynamicHeight>
+<!-- #enddocregion dynamic-height -->
   <mat-tab label="Short tab">
     <div class="example-small-box mat-elevation-z4">
       Small content

src/components-examples/material/tabs/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html

@@ -1,9 +1,11 @@
 <mat-tab-group>
+<!-- #docregion mat-tab-content -->
   <mat-tab label="First">
     <ng-template matTabContent>
       Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
     </ng-template>
   </mat-tab>
+<!-- #enddocregion mat-tab-content -->
   <mat-tab label="Second">
     <ng-template matTabContent>
       Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}

src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html

@@ -1,9 +1,11 @@
+<!-- #docregion mat-tab-nav -->
 <nav mat-tab-nav-bar [backgroundColor]="background">
   <a mat-tab-link *ngFor="let link of links"
      (click)="activeLink = link"
      [active]="activeLink == link"> {{link}} </a>
   <a mat-tab-link disabled>Disabled Link</a>
 </nav>
+<!-- #enddocregion mat-tab-nav -->
 
 <button mat-raised-button class="example-action-button" (click)="toggleBackground()">
   Toggle background

src/material/chips/chips.md

@@ -1,14 +1,7 @@
 `<mat-chip-list>` displays a list of values as individual, keyboard accessible, chips.
 
-<!-- example(chips-overview) -->
-
-```html
-<mat-chip-list>
-  <mat-chip>Papadum</mat-chip>
-  <mat-chip>Naan</mat-chip>
-  <mat-chip>Dal</mat-chip>
-</mat-chip-list>
-```
+<!-- example({"example": "chips-overview",
+              "file": "chips-overview-example.html"}) -->
 
 ### Unstyled chips
 By default, `<mat-chip>` has Material Design styles applied. For a chip with no styles applied,
@@ -59,13 +52,8 @@ also gain focus when clicked, ensuring keyboard navigation starts at the appropr
 If you want the chips in the list to be stacked vertically, instead of horizontally, you can apply
 the `mat-chip-list-stacked` class, as well as the `aria-orientation="vertical"` attribute:
 
-```html
-<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
-  <mat-chip>Papadum</mat-chip>
-  <mat-chip>Naan</mat-chip>
-  <mat-chip>Dal</mat-chip>
-</mat-chip-list>
-```
+<!-- example({"example": "chips-stacked",
+              "file": "chips-stacked-example.html"}) -->
 
 ### Specifying global configuration defaults
 Default options for the chips module can be specified using the `MAT_CHIPS_DEFAULT_OPTIONS`