docs(typescript): add examples of TypeScript location and lifecycle i…

…nterfaces

Fixes #423

demo/vaadin-router-getting-started-demos.html

@@ -85,6 +85,39 @@ <h3>Getting Started</h3>
       <code>this.location.pathname</code>).
     </p>
 
+    <h3>Using <code>this.location</code></h3>
+    <p>
+      If you use Polymer and JavaScript to build your view components,
+      the <code>location</code> property does not require a declaration.
+      It is recommended to add it to the <code>properties</code> of your
+      component for consistency, though:
+    </p>
+    <pre><code>static get properties() {
+  return {
+    // ...
+    location: Object
+  };
+}</code></pre>
+    <p>
+      For LitElement and TypeScript a declaration in the component is required.
+      Declare the <code>location</code> property in the class and initialize it
+      from the <code>router</code> Vaadin Router instance:
+    </p>
+    <pre><code>import {router} from './index';
+import {customElement, html, LitElement, property} from 'lit-element';
+
+@customElement('my-view')
+class MyViewElement extends LitElement {
+  @property({type: Object}) location = router.location;
+
+  render() {
+    return html`
+      Current location URL: ${this.location.getUrl()}
+    `;
+  }
+}</code></pre>
+    <p>This property is automatically updated on navigation.</p>
+
     <h3>Fallback Routes (404)</h3>
     <p>If Vaadin Router does not find a matching route, the promise returned
       from the <code>render()</code> method gets rejected, and any content in

demo/vaadin-router-lifecycle-callbacks-demos.html

@@ -424,6 +424,90 @@ <h3>Getting the Current Location</h3>
       property is used later when processing the <code>vaadin-router-location-changed
       </code> events.
     </p>
+
+    <h3>TypeScript Interfaces</h3>
+    <p>
+      For using with components defined as TypeScript classes, the following
+      interfaces are available for implementing:
+    </p>
+    <ul>
+      <li>
+        <p><b><code>BeforeEnterObserver</code></b></p>
+        <pre><code>import {
+  BeforeEnterObserver,
+  PreventAndRedirectCommands,
+  Router,
+  RouterLocation
+} from '@vaadin/router';
+
+@customElement('my-view-with-before-enter')
+class MyViewWithBeforeEnter extends LitElement implements BeforeEnterObserver {
+  onBeforeEnter(
+      location: RouterLocation,
+      commands: PreventAndRedirectCommands,
+      router: Router) {
+    // ...
+  }
+}</code></pre>
+      </li>
+      <li>
+        <p><b><code>AfterEnterObserver</code></b></p>
+        <pre><code>import {
+  AfterEnterObserver,
+  EmptyCommands,
+  Router,
+  RouterLocation
+} from '@vaadin/router';
+
+@customElement('my-view-with-after-enter')
+class MyViewWithAfterEnter extends LitElement implements AfterEnterObserver {
+  onAfterEnter(
+      location: RouterLocation,
+      commands: EmptyCommands,
+      router: Router) {
+    // ...
+  }
+}</code></pre>
+      </li>
+      <li>
+        <p><b><code>BeforeLeaveObserver</code></b></p>
+        <pre><code>import {
+  BeforeLeaveObserver,
+  PreventCommands,
+  Router,
+  RouterLocation
+} from '@vaadin/router';
+
+@customElement('my-view-with-before-leave')
+class MyViewWithBeforeLeave extends LitElement implements BeforeLeaveObserver {
+  onBeforeLeave(
+      location: RouterLocation,
+      commands: PreventCommands,
+      router: Router) {
+    // ...
+  }
+}</code></pre>
+      </li>
+      <li>
+        <p><b><code>AfterLeaveObserver</code></b></p>
+        <pre><code>import {
+  AfterLeaveObserver,
+  EmptyCommands,
+  Router,
+  RouterLocation
+} from '@vaadin/router';
+
+@customElement('my-view-with-after-leave')
+class MyViewWithAfterLeave extends LitElement implements AfterLeaveObserver {
+  onAfterLeave(
+      location: RouterLocation,
+      commands: EmptyCommands,
+      router: Router) {
+    // ...
+  }
+}</code></pre>
+      </li>
+    </ul>
   </template>
   <script>
     class VaadinRouterLifecycleCallbacksDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {