docs(tooltip): scrollable example not working (#18661)

Fixes the example that shows how a tooltip works with a `CdkScrollable` not working, because we hadn't imported the module. Also fixes a few places that were using the old way of writing the selector.
angular · Mar 6, 2020 · 0e80863 · 0e80863
1 parent b486891
commit 0e80863
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 7 deletions.
diff --git a/src/cdk/scrolling/scroll-dispatcher.spec.ts b/src/cdk/scrolling/scroll-dispatcher.spec.ts
@@ -241,7 +241,7 @@ describe('ScrollDispatcher', () => {
 
 /** Simple component that contains a large div and can be scrolled. */
 @Component({
-  template: `<div #scrollingElement cdk-scrollable style="height: 9999px"></div>`
+  template: `<div #scrollingElement cdkScrollable style="height: 9999px"></div>`
 })
 class ScrollingComponent {
   @ViewChild(CdkScrollable) scrollable: CdkScrollable;
@@ -252,13 +252,13 @@ class ScrollingComponent {
 /** Component containing nested scrollables. */
 @Component({
   template: `
-    <div id="scrollable-1" cdk-scrollable>
-      <div id="scrollable-1a" cdk-scrollable>
+    <div id="scrollable-1" cdkScrollable>
+      <div id="scrollable-1a" cdkScrollable>
         <div #interestingElement></div>
       </div>
-      <div id="scrollable-1b" cdk-scrollable></div>
+      <div id="scrollable-1b" cdkScrollable></div>
     </div>
-    <div id="scrollable-2" cdk-scrollable></div>
+    <div id="scrollable-2" cdkScrollable></div>
   `
 })
 class NestedScrollingComponent {

diff --git a/src/components-examples/material/tooltip/BUILD.bazel b/src/components-examples/material/tooltip/BUILD.bazel
@@ -11,6 +11,7 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/tooltip",
     deps = [
+        "//src/cdk/scrolling",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/input",

diff --git a/src/components-examples/material/tooltip/index.ts b/src/components-examples/material/tooltip/index.ts
@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
+import {ScrollingModule} from '@angular/cdk/scrolling';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatInputModule} from '@angular/material/input';
@@ -51,6 +52,7 @@ const EXAMPLES = [
     MatSelectModule,
     MatTooltipModule,
     ReactiveFormsModule,
+    ScrollingModule, // Required for the auto-scrolling example
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html
@@ -7,7 +7,7 @@
   </mat-select>
 </mat-form-field>
 
-<div class="example-container" cdk-scrollable>
+<div class="example-container" cdkScrollable>
   <button mat-raised-button #tooltip="matTooltip"
           matTooltip="Info about the action"
           [matTooltipPosition]="position.value"

diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
@@ -1116,7 +1116,7 @@ class BasicTooltipDemo {
 @Component({
      selector: 'app',
      template: `
-    <div cdk-scrollable style="padding: 100px; margin: 300px;
+    <div cdkScrollable style="padding: 100px; margin: 300px;
                                height: 200px; width: 200px; overflow: auto;">
       <button *ngIf="showButton" style="margin-bottom: 600px"
               [matTooltip]="message"