feat(playground): add title handling example

ngParty · May 30, 2016 · 53af10f · 53af10f
1 parent 2c2bb11
commit 53af10f
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 1 deletion.
diff --git a/playground/app/components/title/index.ts b/playground/app/components/title/index.ts
@@ -0,0 +1,9 @@
+import * as angular from 'angular';
+import { provide } from 'ng-metadata/core';
+
+import { TitleHandlerComponent } from './title-handler.component';
+
+export const TitleHandlerModule = angular
+  .module( 'titleHandler', [] )
+  .directive( ...provide( TitleHandlerComponent ) )
+  .name;
diff --git a/playground/app/components/title/title-handler.component.ts b/playground/app/components/title/title-handler.component.ts
@@ -0,0 +1,27 @@
+// Import the native Angular services.
+import { Component } from 'ng-metadata/core';
+import { Title }     from 'ng-metadata/platform';
+
+@Component({
+  selector: 'my-title-handler',
+  template: `
+  <p>Document title is: {{ $ctrl.title }}</p>
+  <p>
+    Select a title to set on the current HTML document:
+  </p>
+  <ul>
+    <li><a ng-click="$ctrl.setTitle( 'Good morning!' )">Good morning</a>.</li>
+    <li><a ng-click="$ctrl.setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
+    <li><a ng-click="$ctrl.setTitle( 'Good evening!' )">Good evening</a>.</li>
+  </ul>
+  `
+})
+export class TitleHandlerComponent {
+  constructor(private titleService: Title ) {}
+
+  get title(): string { return this.titleService.getTitle() }
+
+  setTitle( newTitle: string) {
+    this.titleService.setTitle( newTitle );
+  }
+}
diff --git a/playground/app/components/todo-app.html b/playground/app/components/todo-app.html
@@ -186,3 +186,15 @@ <h3>Docs examples:</h3>
     <change-detector></change-detector>
   </div>
 </section>
+
+<!--Title-->
+<section class="demo-content">
+  <button
+    class="mdl-button mdl-js-button mdl-button--accent"
+    ng-click="$ctrl.showTitleHandler=!$ctrl.showTitleHandler">
+    {{ $ctrl.showTitleHandler? 'hide' : 'show'}} <code>Title</code> example
+  </button>
+  <div ng-if="$ctrl.showTitleHandler">
+    <my-title-handler></my-title-handler>
+  </div>
+</section>
diff --git a/playground/app/index.ts b/playground/app/index.ts
@@ -1,9 +1,11 @@
 import * as angular from 'angular';
 import { provide } from 'ng-metadata/core';
+import { Title } from 'ng-metadata/platform';
 
 import { TabsModule } from './components/tabs/index'
 import { LifecycleHooksModule } from './components/lifecycle/index';
 import { ChangeDetectorModule } from './components/change-detector/index';
+import { TitleHandlerModule } from './components/title/index';
 
 import { TodoAppCmp } from './components/todo-app.component';
 import { TodoItemCmp } from './components/todo-item.component';
@@ -21,7 +23,15 @@ import { MyDirectiveTesterDirective } from './directives/my-directive-tester.dir
 import { TesterAttrDirective } from './directives/my-tester.directive';
 import { GlobalListenerDirective } from './directives/global-listener.directive';
 import { TesterComponent } from './components/tester/tester.component';
-export const AppModule = angular.module( 'app', [TabsModule,LifecycleHooksModule,ChangeDetectorModule] )
+export const AppModule = angular.module( 'app', [
+  TabsModule,
+  LifecycleHooksModule,
+  ChangeDetectorModule,
+  TitleHandlerModule
+] )
+
+  // we need to register the service manually
+  .service( ...provide( Title ) )
 
   .directive( ...provide( TodoAppCmp ) )
   .directive( ...provide( AddTodoCmp ) )

diff --git a/playground/ng-metadata.legacy.d.ts b/playground/ng-metadata.legacy.d.ts
@@ -6,6 +6,30 @@ declare module ngMetadataPlatform{
     strictDi?: boolean;
   }): void;
 
+  /**
+   * A service that can be used to get and set the title of a current HTML document.
+   *
+   * Since an Angular 2 application can't be bootstrapped on the entire HTML document (`<html>` tag)
+   * it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
+   * (representing the `<title>` tag). Instead, this service can be used to set and get the current
+   * title value.
+   */
+  class Title {
+      private $document;
+      constructor($document: ng.IDocumentService);
+      /**
+       * Get the title of the current HTML document.
+       * @returns {string}
+       */
+      getTitle(): string;
+      /**
+       * Set the title of the current HTML document.
+       * @param newTitle
+       */
+      setTitle(newTitle: string): void;
+  }
+
+
 }
 declare module ngMetadataCore{