docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.html

@@ -8,7 +8,9 @@ <h3>Implicit labeling</h3>
             <hr>
         </header>
 
+        <!-- #docregion cb-a11y-form-controls-input-usage -->
         <a11y-input>Type something:</a11y-input>
+        <!--#enddocregion-->
 
         <a11y-textarea>Type some text:</a11y-textarea>
 

public/docs/ts/latest/cookbook/a11y.jade

@@ -109,6 +109,9 @@ include ../_util-fns
 
     We will discuss a number of ways to do this.
 
+    **NOTE**: You will see `ng-content` make its appearance a lot in the examples. We are making use of `Content Projection`
+    to load content into the templates of our components.
+
 :marked
     ### Implicit labelling
 
@@ -120,7 +123,7 @@ include ../_util-fns
     With this writing style you simply wrap the `HTML` element inside a label tag and you are done. There is no need to
     generate or suppply field id's as you will see with the other methods.
 
-    Your general `HTML` becomes:
+    Implicit labelling is done as follows:
 
 code-example(language="html" escape="html").
     <label>label text
@@ -130,13 +133,33 @@ code-example(language="html" escape="html").
 :marked
     Of course, here the `INPUT` element can be any native `HTML` form element.
 
-    So let us see how we would write the commonly used native `HTML` form elements in our Angular&nbsp;2 components.
+    Let us see how we would write the commonly used native `HTML` form elements in our Angular&nbsp;2 components.
 
 :marked
     #### Inputs
 
+    Your component template:
+
 +makeExample('cb-a11y/ts/app/form-controls/a11y-input.component.html')
 
+:marked
+    Used as:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-input-usage')
+
+:marked
+    Which is then rendered as:
+
+code-example(language="html" escape="html").
+    <a11y-input>
+        <div class="form-group ">
+            <label>
+                Type something:
+                <input class="form-control">
+            </label>
+        </div>
+    </a11y-input>
+
 :marked
     #### Textareas