Change all the For and If directives to NgFor and NgIf

Author: SamVerschueren

public/docs/js/latest/guide/displaying-data.jade

@@ -104,7 +104,7 @@
         want to move them to a separate file and load them with <code>templateUrl:</code> instead.
 
 .l-main-section
-    h2#Create-an-array Create an array property and use For on the view
+    h2#Create-an-array Create an array property and use NgFor on the view
     p Moving up from a single property, create an array to display as a list.
 
     code-tabs
@@ -127,7 +127,7 @@
           <span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
         }
     p.
-        You can then use this array in your template with the <code>For</code> directive to create copies of DOM elements
+        You can then use this array in your template with the <code>NgFor</code> directive to create copies of DOM elements
         with one for each item in the array.
 
     code-tabs
@@ -137,7 +137,7 @@
           &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
           &lt;p&gt;Friends:&lt;/p&gt;
           &lt;ul&gt;
-             &lt;li *for=&quot;#name of names&quot;&gt;
+             &lt;li *ng-for=&quot;#name of names&quot;&gt;
                 {{ name }}
              &lt;/li&gt;
           &lt;/ul&gt;
@@ -148,22 +148,22 @@
           &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
           &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
           &#39;&lt;ul&gt;&#39; +
-          &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
+          &#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
           &#39;{{ name }}&#39; +
           &#39;&lt;/li&gt;&#39; +
           &#39;&lt;/ul&gt;&#39;,
 
     p.
-        To make this work, you'll also need to add the <code>For</code> directive used by the template so
+        To make this work, you'll also need to add the <code>NgFor</code> directive used by the template so
         that Angular knows to include it:
 
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //Typescript
-        import {Component, View, bootstrap, For} from 'angular2/angular2';
+        import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
         @View({
           ...
-          directives: [For]
+          directives: [NgFor]
         })
 
 
@@ -173,7 +173,7 @@
           ...
           new angular.ViewAnnotation({
             ...
-            directives: [angular.For]
+            directives: [angular.NgFor]
           })
         ];
 
@@ -185,13 +185,13 @@
     p Let's look at the few lines that do the work again:
     code-example(language="html" format="linenums").
       //HTML
-      &lt;li *for=&quot;#name of names&quot;&gt;
+      &lt;li *ng-for=&quot;#name of names&quot;&gt;
          {{ name }}
       &lt;/li&gt;
     p The way to read this is:
     ul
         li.
-            <code>*for</code> : create a DOM element for each item in an
+            <code>*ng-for</code> : create a DOM element for each item in an
             <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
              like an array
         li <code>#name</code> : refer to individual values of the iterable as 'name'
@@ -236,7 +236,7 @@
       code-pane(language="javascript" name="TypeScript" format="linenums").
         @Component({
           ...
-          <span class='otl'>injectables: [FriendsService]</span>
+          <span class='otl'>appInjector: [FriendsService]</span>
         })
         class DisplayComponent {
           myName: string;
@@ -257,58 +257,58 @@
         DisplayComponent.annotations = [
           new angular.ComponentAnnotation({
             selector: "display",
-            <span class='otl'>injectables: [FriendsService]</span>
+            <span class='otl'>appInjector: [FriendsService]</span>
           }),
           new angular.ViewAnnotation({
             template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
-            directives: [angular.For]
+            directives: [angular.NgFor]
           })
         ];
         <span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
         document.addEventListener("DOMContentLoaded", function() {
           angular.bootstrap(DisplayComponent);
         });
 .l-main-section
-    h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
+    h2#Conditionally-displaying-data-with-NgIf Conditionally displaying data with NgIf
     p.
-        Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>If</code>.  The
-        <code>If</code> directive adds or removes elements from the DOM based on the expression you provide.
+        Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>NgIf</code>.  The
+        <code>NgIf</code> directive adds or removes elements from the DOM based on the expression you provide.
     p See it in action by adding a paragraph at the end of your template
     pre.prettyprint.lang-html
         code.
-            &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
-    p You'll also need to add the <code>If</code> directive so Angular knows to include it.
+            &lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
+    p You'll also need to add the <code>NgIf</code> directive so Angular knows to include it.
 
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //Typescript
-        import {Component, View, bootstrap, For, If} from 'angular2/angular2';
+        import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
         ...
-          directives: [For, If]
+          directives: [NgFor, NgIf]
       code-pane(language="javascript" name="ES5" format="linenums").
         //ES5
-        directives: [angular.For, angular.If]
+        directives: [angular.NgFor, angular.NgIf]
     p.
         As there are currently 6 items in the list, you'll see the message congratulating you on your many friends.
         Remove three items from the list, reload your browser, and see that the message no longer displays.
 
     code-tabs
       code-pane(language="javascript" name="TypeScript" format="linenums").
         //TypeScript
-        import {Component, View, bootstrap, For, If} from 'angular2/angular2';
+        import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
         ...
         @View({
           <span class='otl'>template</span>: `
             &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
             &lt;p&gt;Friends:&lt;/p&gt;
             &lt;ul&gt;
-              &lt;li *for=&quot;#name of names&quot;&gt;
+              &lt;li *ng-for=&quot;#name of names&quot;&gt;
                 {{ name }}
               &lt;/li&gt;
             &lt;/ul&gt;
-            &lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
+            &lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
           `,
-          directives: [For, If]
+          directives: [NgFor, NgIf]
         })
         class DisplayComponent {
           ...
@@ -333,12 +333,12 @@
               &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
               &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
               &#39;&lt;ul&gt;&#39; +
-              &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
+              &#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
               &#39;{{ name }}&#39; +
               &#39;&lt;/li&gt;&#39; +
               &#39;&lt;/ul&gt;&#39; +
-              &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
-            directives: [angular.For, angular.If]
+              &#39;&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
+            directives: [angular.NgFor, angular.NgIf]
           })
         ];