add host and query metadata section

Author: filipesilva

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6

@@ -9,14 +9,15 @@ import { BrowserModule } from '@angular/platform-browser';
 // #docregion
 @Component({
   selector: 'heroes-bindings',
-  template: `<h1 [class.active]="active">
-    Tour of Heroes
-  </h1>`
+  template: `
+    <h1 [class.active]="active">
+      Tour of Heroes
+    </h1>
+  `
 })
 class HeroesComponent {
   @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading')
-    hClass = true;
+  @HostBinding('class.heading') hClass = true;
   active;
 
   constructor() {}

public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts

@@ -9,14 +9,15 @@ import { BrowserModule } from '@angular/platform-browser';
 // #docregion
 @Component({
   selector: 'heroes-bindings',
-  template: `<h1 [class.active]="active">
-    Tour of Heroes
-  </h1>`
+  template: `
+    <h1 [class.active]="active">
+      Tour of Heroes
+    </h1>
+  `
 })
 class HeroesComponent {
   @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading')
-    hClass = true;
+  @HostBinding('class.heading') hClass = true;
   active: boolean;
 
   constructor() {}

public/docs/js/latest/cookbook/ts-to-js.jade

@@ -24,7 +24,7 @@ include ../../../../_includes/_util-fns
 
   [Dependency Injection](#dependency-injection)
 
-  [Host and Query Metadata](#other-property-metadata)
+  [Host and Query Metadata](#host-query-metadata)
 
   **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
   code shown in this cookbook.**
@@ -358,92 +358,102 @@ a(id="property-metadata")
     ES5 Javascript
   `)  
 
-a(id="other-property-metadata")
+a(id="host-query-metadata")
 .l-main-section
 :marked
   ## Host and Query Metadata
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript  
-  tr(style=top)
+  ### Host Decorators
+
+  In Typescript and ES6 with decorators we can use host property decorators to bind a host
+  element to a component or directive.
+  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
+  binds host element properties to component data properties. 
+  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
+  host element events to component event handlers.
+
+  When using ES5/6 we add a `host` attribute to the component metadata to achieve the
+  same effect as `@HostBinding` and `@HostListener`. 
+  
+  The  `host` value is an object whose properties are host property and listener bindings:
 
-    td
-      :marked
-        ### Host Decorators
-
-        We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
-        binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator bimds
-        host element events to component event handlers.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use `host` metadata 
-          instead of the `@HostBinding` and `@HostListener` property decorators.
-    td
-      :marked
-        ### Host Metadata
-        
-        We add a `host` attribute to the component metadata to achieve the
-        same effect as `@HostBinding` and `@HostListener`. 
-        
-        The  `host` value is an object whose properties are host property and listener bindings:
-        
-        * Each key follows regular Angular binding syntax: `[property]` for host bindings
-          or `(event)` for host listeners.
-        * Each value identifies the corresponding component property or method.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-bindings.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Query Decorators
-        
-        There are several property decorators for querying the descendants of
-        a component or directive.
-        
-        The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
-        allow a component to query instances of other components that are used in
-        its view.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
-
-      :marked
-        The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
-        [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
-        allow a component to query instances of other components that have been projected
-        into its view from elsewhere.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `queries` metadata 
-          instead of the `@ViewChild` and `@ContentChild` property decorators.      
-    td
-      :marked
-        ### Query Metadata
-        
-        We access a component's view children by adding a `queries` attribute to
-        the component metadata. It should be an object where:
-        
-        * Each key is the name of a component property that will hold the view children
-        * Each value is an instance of either `ViewChild` or `ViewChildren`.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'view')(format="." )
-
-      :marked
-        We add *content* child queries to the same `queries` attribute
-        in the same manner, using instances of `ContentChild` or `ContentChildren`:
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'content')(format="." )
+  * Each key follows regular Angular binding syntax: `[property]` for host bindings
+    or `(event)` for host listeners.
+  * Each value identifies the corresponding component property or method.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-bindings.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js/app/heroes-bindings.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript
+  `)
+.alert.is-helpful
+  :marked
+    In TypeScript and ES6 with decorators we can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
+
+:marked
+  ### Query Decorators
+  
+  There are several property decorators for querying the descendants of
+  a component or directive.
+  
+  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
+  allow a component to query instances of other components that are used in
+  its view. 
+
+  In ES5/6 Javascript we access a component's view children by adding a `queries` attribute to
+  the component metadata. It should be an object where:
+  
+  * Each key is the name of a component property that will hold the view children
+  * Each value is an instance of either `ViewChild` or `ViewChildren`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    view,
+    view,
+    view,
+    view
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript
+  `)
+
+:marked
+  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
+  allow a component to query instances of other components that have been projected
+  into its view from elsewhere.
+
+  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    content,
+    content,
+    content,
+    content
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript
+  `)