From 2a8a57d8f743d0b55e2b228e6577e15a89232053 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 27 Mar 2019 21:21:34 +0100
Subject: [PATCH] docs(menu): add live example of menu position (#15591)

Sets up a live example for the menu position inputs.
---
 src/lib/menu/menu.md                          |  2 ++
 .../menu-position/menu-position-example.css   |  1 +
 .../menu-position/menu-position-example.html  | 24 +++++++++++++++++++
 .../menu-position/menu-position-example.ts    | 11 +++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 src/material-examples/menu-position/menu-position-example.css
 create mode 100644 src/material-examples/menu-position/menu-position-example.html
 create mode 100644 src/material-examples/menu-position/menu-position-example.ts

diff --git a/src/lib/menu/menu.md b/src/lib/menu/menu.md
index 3f0de3025c9..d3888f9c3c5 100644
--- a/src/lib/menu/menu.md
+++ b/src/lib/menu/menu.md
@@ -68,6 +68,8 @@ The position can be changed using the `xPosition` (`before | after`) and `yPosit
 </button>
 ```
 
+<!-- example(menu-position) -->
+
 ### Nested menu
 
 Material supports the ability for an `mat-menu-item` to open a sub-menu. To do so, you have to define
diff --git a/src/material-examples/menu-position/menu-position-example.css b/src/material-examples/menu-position/menu-position-example.css
new file mode 100644
index 00000000000..7432308753e
--- /dev/null
+++ b/src/material-examples/menu-position/menu-position-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/menu-position/menu-position-example.html b/src/material-examples/menu-position/menu-position-example.html
new file mode 100644
index 00000000000..41df541efff
--- /dev/null
+++ b/src/material-examples/menu-position/menu-position-example.html
@@ -0,0 +1,24 @@
+<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
+<mat-menu #aboveMenu="matMenu" yPosition="above">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
+<mat-menu #belowMenu="matMenu" yPosition="below">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
+<mat-menu #beforeMenu="matMenu" xPosition="before">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+
+<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+<mat-menu #afterMenu="matMenu" xPosition="after">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
diff --git a/src/material-examples/menu-position/menu-position-example.ts b/src/material-examples/menu-position/menu-position-example.ts
new file mode 100644
index 00000000000..4162ac39e00
--- /dev/null
+++ b/src/material-examples/menu-position/menu-position-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Menu positioning
+ */
+@Component({
+  selector: 'menu-position-example',
+  templateUrl: 'menu-position-example.html',
+  styleUrls: ['menu-position-example.css'],
+})
+export class MenuPositionExample {}