docs(cdk/layout): add BreakpointObserver example (#22828)

Also adds a layout page to the dev-app since it didn't have one

(cherry picked from commit 249201b)

Author: jelbourn

.github/CODEOWNERS

@@ -175,6 +175,7 @@
 /src/dev-app/grid-list/**                          @jelbourn
 /src/dev-app/icon/**                               @jelbourn
 /src/dev-app/input/**                              @mmalerba
+/src/dev-app/layout/**                             @jelbourn
 /src/dev-app/list/**                               @jelbourn @crisbeto @devversion
 /src/dev-app/live-announcer/**                     @jelbourn
 /src/dev-app/mdc-button/**                         @andrewseguin

src/cdk/layout/layout.md

@@ -8,6 +8,8 @@ size ranges between breakpoints correspond to different standard screen sizes.
 `BreakpointObserver` lets you evaluate media queries to determine the current screen size and
 react to changes when the viewport size crosses a breakpoint.
 
+<!-- example(breakpoint-observer-overview) -->
+
 #### Check the current viewport size
 You can use the `isMatched` method to evaluate one or more media queries against the current
 viewport size.

src/components-examples/BUILD.bazel

@@ -58,6 +58,7 @@ ALL_EXAMPLES = [
     "//src/components-examples/cdk/drag-drop",
     "//src/components-examples/cdk/clipboard",
     "//src/components-examples/cdk/a11y",
+    "//src/components-examples/cdk/layout",
     "//src/components-examples/cdk/overlay",
     "//src/components-examples/cdk-experimental/menu",
     "//src/components-examples/cdk-experimental/popover-edit",

src/components-examples/cdk/layout/BUILD.bazel

@@ -0,0 +1,25 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "layout",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/components-examples/cdk/layout",
+    deps = [
+        "//src/cdk/layout",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)

src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.css

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

src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.html

@@ -0,0 +1,6 @@
+<p>
+  Resize your browser window to see the current screen size change.
+</p>
+<p>
+  The current screen size is <strong>{{currentScreenSize}}</strong>
+</p>

src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts

@@ -0,0 +1,45 @@
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {Component, OnDestroy} from '@angular/core';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+/** @title Respond to viewport changes with BreakpointObserver */
+@Component({
+  selector: 'breakpoint-observer-overview-example',
+  templateUrl: 'breakpoint-observer-overview-example.html',
+  styleUrls: ['breakpoint-observer-overview-example.css']
+})
+export class BreakpointObserverOverviewExample implements OnDestroy {
+  destroyed = new Subject<void>();
+  currentScreenSize: string;
+
+  // Create a map to display breakpoint names for demonstration purposes.
+  displayNameMap = new Map([
+    [Breakpoints.XSmall, 'XSmall'],
+    [Breakpoints.Small, 'Small'],
+    [Breakpoints.Medium, 'Medium'],
+    [Breakpoints.Large, 'Large'],
+    [Breakpoints.XLarge, 'XLarge'],
+  ]);
+
+  constructor(breakpointObserver: BreakpointObserver) {
+    breakpointObserver.observe([
+      Breakpoints.XSmall,
+      Breakpoints.Small,
+      Breakpoints.Medium,
+      Breakpoints.Large,
+      Breakpoints.XLarge,
+    ]).pipe(takeUntil(this.destroyed)).subscribe(result => {
+        for (const query of Object.keys(result.breakpoints)) {
+          if (result.breakpoints[query]) {
+            this.currentScreenSize = this.displayNameMap.get(query) ?? 'Unknown';
+          }
+        }
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+}

src/components-examples/cdk/layout/index.ts

@@ -0,0 +1,23 @@
+import {LayoutModule} from '@angular/cdk/layout';
+import {NgModule} from '@angular/core';
+import {
+  BreakpointObserverOverviewExample,
+} from './breakpoint-observer-overview/breakpoint-observer-overview-example';
+
+export {BreakpointObserverOverviewExample};
+
+const EXAMPLES = [
+  BreakpointObserverOverviewExample,
+];
+
+@NgModule({
+  imports: [
+    LayoutModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+  entryComponents: EXAMPLES,
+})
+export class CdkLayoutExamplesModule {
+}
+

src/dev-app/BUILD.bazel

@@ -45,6 +45,7 @@ ng_module(
         "//src/dev-app/grid-list",
         "//src/dev-app/icon",
         "//src/dev-app/input",
+        "//src/dev-app/layout",
         "//src/dev-app/list",
         "//src/dev-app/live-announcer",
         "//src/dev-app/mdc-autocomplete",

src/dev-app/dev-app/dev-app-layout.ts

@@ -54,6 +54,7 @@ export class DevAppLayout {
     {name: 'Icon', route: '/icon'},
     {name: 'Input', route: '/input'},
     {name: 'List', route: '/list'},
+    {name: 'Layout', route: '/layout'},
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
     {name: 'Menubar', route: '/menubar'},