chore: rename if to ng-if

modules/angular2/directives.js

@@ -7,13 +7,13 @@
 
 import {CONST_EXPR} from './src/facade/lang';
 import {For} from './src/directives/for';
-import {If} from './src/directives/if';
+import {NgIf} from './src/directives/ng_if';
 import {NonBindable} from './src/directives/non_bindable';
 import {Switch, SwitchWhen, SwitchDefault} from './src/directives/switch';
 
 export * from './src/directives/class';
 export * from './src/directives/for';
-export * from './src/directives/if';
+export * from './src/directives/ng_if';
 export * from './src/directives/non_bindable';
 export * from './src/directives/switch';
 
@@ -58,5 +58,5 @@ export * from './src/directives/switch';
  *
  */
 export const coreDirectives:List = CONST_EXPR([
-  For, If, NonBindable, Switch, SwitchWhen, SwitchDefault
+  For, NgIf, NonBindable, Switch, SwitchWhen, SwitchDefault
 ]);

modules/angular2/src/directives/ng_if.js

@@ -12,7 +12,7 @@ import {isBlank} from 'angular2/src/facade/lang';
  * # Example:
  *
  * ```
- * <div *if="errorCount > 0" class="error">
+ * <div *ng-if="errorCount > 0" class="error">
  *   <!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
  *   {{errorCount}} errors detected
  * </div>
@@ -20,19 +20,19 @@ import {isBlank} from 'angular2/src/facade/lang';
  *
  * # Syntax
  *
- * - `<div *if="condition">...</div>`
+ * - `<div *ng-if="condition">...</div>`
- * - `<div template="if condition">...</div>`
+ * - `<div template="ng-if condition">...</div>`
- * - `<template [if]="condition"><div>...</div></template>`
+ * - `<template [ng-if]="condition"><div>...</div></template>`
  *
  * @exportedAs angular2/directives
  */
 @Directive({
-  selector: '[if]',
+  selector: '[ng-if]',
   properties: {
-    'condition': 'if'
+    'ngIf': 'ngIf'
   }
 })
-export class If {
+export class NgIf {
   viewContainer: ViewContainerRef;
   protoViewRef: ProtoViewRef;
   prevCondition: boolean;
@@ -43,7 +43,7 @@ export class If {
     this.protoViewRef = protoViewRef;
   }
 
-  set condition(newCondition /* boolean */) {
+  set ngIf(newCondition /* boolean */) {
     if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
       this.prevCondition = true;
       this.viewContainer.create(this.protoViewRef);

modules/angular2/src/render/dom/compiler/view_splitter.js

@@ -38,7 +38,7 @@ export class ViewSplitter extends CompileStep {
     var templateBindings = MapWrapper.get(attrs, 'template');
     var hasTemplateBinding = isPresent(templateBindings);
 
-    // look for template shortcuts such as *if="condition" and treat them as template="if condition"
+    // look for template shortcuts such as *ng-if="condition" and treat them as template="if condition"
     MapWrapper.forEach(attrs, (attrValue, attrName) => {
       if (StringWrapper.startsWith(attrName, '*')) {
         var key = StringWrapper.substring(attrName, 1);  // remove the star

modules/angular2/test/core/compiler/dynamic_component_loader_spec.js

@@ -20,7 +20,7 @@ import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {If} from 'angular2/src/directives/if';
+import {NgIf} from 'angular2/src/directives/ng_if';
 import {DomRenderer} from 'angular2/src/render/dom/dom_renderer';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
@@ -64,8 +64,8 @@ export function main() {
       it('should allow to destroy and create them via viewcontainer directives',
         inject([TestBed, AsyncTestCompleter], (tb, async) => {
           tb.overrideView(MyComp, new View({
-            template: '<div><dynamic-comp #dynamic template="if: ctxBoolProp"></dynamic-comp></div>',
+            template: '<div><dynamic-comp #dynamic template="ng-if: ctxBoolProp"></dynamic-comp></div>',
-            directives: [DynamicComp, If]
+            directives: [DynamicComp, NgIf]
           }));
 
           tb.createView(MyComp).then((view) => {

modules/angular2/test/core/compiler/integration_spec.js

@@ -32,7 +32,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
 
-import {If} from 'angular2/src/directives/if';
+import {NgIf} from 'angular2/src/directives/ng_if';
 import {For} from 'angular2/src/directives/for';
 
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
@@ -561,11 +561,11 @@ export function main() {
         tb.overrideView(MyComp, new View({
           template: `
             <some-directive>
-              <p *if="true">
+              <p *ng-if="true">
                 <cmp-with-ancestor #child></cmp-with-ancestor>
               </p>
             </some-directive>`,
-          directives: [SomeDirective, CompWithAncestor, If]
+          directives: [SomeDirective, CompWithAncestor, NgIf]
         }));
 
         tb.createView(MyComp, {context: ctx}).then((view) => {
@@ -728,8 +728,8 @@ export function main() {
 
       it('should support render global events from multiple directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
         tb.overrideView(MyComp, new View({
-          template: '<div *if="ctxBoolProp" listener listenerother></div>',
+          template: '<div *ng-if="ctxBoolProp" listener listenerother></div>',
-          directives: [If, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
+          directives: [NgIf, DirectiveListeningDomEvent, DirectiveListeningDomEventOther]
         }));
 
         tb.createView(MyComp, {context: ctx}).then((view) => {
@@ -894,8 +894,8 @@ export function main() {
         it('should raise an error for missing template directive (2)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
           expectCompileError(
             tb,
-            '<div><template *if="condition"></template></div>',
+            '<div><template *ng-if="condition"></template></div>',
-            'Missing directive to handle: <template *if="condition">',
+            'Missing directive to handle: <template *ng-if="condition">',
             () => async.done()
           );
         }));
@@ -903,8 +903,8 @@ export function main() {
         it('should raise an error for missing template directive (3)', inject([TestBed, AsyncTestCompleter], (tb, async) => {
           expectCompileError(
             tb,
-            '<div *if="condition"></div>',
+            '<div *ng-if="condition"></div>',
-            'Missing directive to handle \'if\' in MyComp: <div *if="condition">',
+            'Missing directive to handle \'if\' in MyComp: <div *ng-if="condition">',
             () => async.done()
           );
         }));

modules/angular2/test/core/compiler/query_integration_spec.js

@@ -17,7 +17,7 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {QueryList} from 'angular2/src/core/compiler/query_list';
 import {Query} from 'angular2/src/core/annotations_impl/di';
 
-import {If, For} from 'angular2/angular2';
+import {NgIf, For} from 'angular2/angular2';
 
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
@@ -45,7 +45,7 @@ export function main() {
     it('should reflect dynamically inserted directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template =
         '<div text="1"></div>' +
-        '<needs-query text="2"><div *if="shouldShow" [text]="\'3\'"></div></needs-query>' +
+        '<needs-query text="2"><div *ng-if="shouldShow" [text]="\'3\'"></div></needs-query>' +
         '<div text="4"></div>';
 
       tb.createView(MyComp, {html: template}).then((view) => {
@@ -113,7 +113,7 @@ class TextDirective {
 
 @Component({selector: 'my-comp'})
 @View({
-  directives: [NeedsQuery, TextDirective,  If, For]
+  directives: [NeedsQuery, TextDirective,  NgIf, For]
 })
 class MyComp {
   shouldShow: boolean;

modules/angular2/test/directives/ng_if_spec.js

@@ -19,12 +19,12 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {If} from 'angular2/src/directives/if';
+import {NgIf} from 'angular2/src/directives/ng_if';
 
 export function main() {
   describe('if directive', () => {
     it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
+      var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
 
       tb.createView(TestComponent, {html: html}).then((view) => {
         view.detectChanges();
@@ -35,7 +35,7 @@ export function main() {
     }));
 
     it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
+      var html = '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
 
       tb.createView(TestComponent, {html: html}).then((view) => {
         view.detectChanges();
@@ -46,7 +46,7 @@ export function main() {
     }));
 
     it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
+      var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
 
       tb.createView(TestComponent, {html: html}).then((view) => {
         view.context.booleanCondition = false;
@@ -69,7 +69,7 @@ export function main() {
     }));
 
     it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
+      var html = '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
 
       tb.createView(TestComponent, {html: html}).then((view) => {
         view.context.booleanCondition = false;
@@ -104,9 +104,9 @@ export function main() {
     it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var html =
       '<div>' +
-        '<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
+        '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
-        '<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
+        '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
-        '<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
+        '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
       '</div>';
 
       tb.createView(TestComponent, {html: html}).then((view) => {
@@ -132,7 +132,7 @@ export function main() {
     if (!IS_DARTIUM) {
       it('should not add the element twice if the condition goes from true to true (JS)',
         inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
+        var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
         tb.createView(TestComponent, {html: html}).then((view) => {
           view.detectChanges();
@@ -150,7 +150,7 @@ export function main() {
 
       it('should not recreate the element if the condition goes from true to true (JS)',
         inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
+          var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
           tb.createView(TestComponent, {html: html}).then((view) => {
             view.detectChanges();
@@ -168,7 +168,7 @@ export function main() {
     if (IS_DARTIUM) {
       it('should not create the element if the condition is not a boolean (DART)',
         inject([TestBed, AsyncTestCompleter], (tb, async) => {
-          var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
+          var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
 
           tb.createView(TestComponent, {html: html}).then((view) => {
             expect(() => view.detectChanges()).toThrowError();
@@ -183,7 +183,7 @@ export function main() {
 }
 
 @Component({selector: 'test-cmp'})
-@View({directives: [If]})
+@View({directives: [NgIf]})
 class TestComponent {
   booleanCondition: boolean;
   nestedBooleanCondition: boolean;

modules/angular2/test/render/dom/compiler/view_splitter_spec.js

@@ -144,12 +144,12 @@ export function main() {
     describe('elements with *directive_name attribute', () => {
 
       it('should replace the element with an empty <template> element', () => {
-        var rootElement = el('<div><span *if></span></div>');
+        var rootElement = el('<div><span *ng-if></span></div>');
         var originalChild = rootElement.childNodes[0];
         var results = createPipeline().process(rootElement);
         expect(results[0].element).toBe(rootElement);
-        expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" if=""></template></div>');
+        expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template class="ng-binding" ng-if=""></template></div>');
-        expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *if=""></span>')
+        expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *ng-if=""></span>')
         expect(results[2].element).toBe(originalChild);
       });
 

modules/benchmarks/src/costs/index.js

@@ -56,15 +56,15 @@ export function main() {
 @View({
   directives: [If, For, DummyComponent, DummyDirective, DynamicDummy],
   template: `
-    <div *if="testingPlainComponents">
+    <div *ng-if="testingPlainComponents">
       <dummy *for="#i of list"></dummy>
     </div>
 
-    <div *if="testingWithDirectives">
+    <div *ng-if="testingWithDirectives">
       <dummy dummy-decorator *for="#i of list"></dummy>
     </div>
 
-    <div *if="testingDynamicComponents">
+    <div *ng-if="testingDynamicComponents">
       <dynamic-dummy *for="#i of list"></dynamic-dummy>
     </div>
   `

modules/benchmarks/src/naive_infinite_scroll/app.js

@@ -3,7 +3,7 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {ScrollAreaComponent} from './scroll_area';
-import {If, For} from 'angular2/directives';
+import {NgIf, For} from 'angular2/directives';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {document} from 'angular2/src/facade/browser';
 
@@ -14,7 +14,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 
 @Component({selector: 'scroll-app'})
 @View({
-  directives: [ScrollAreaComponent, If, For],
+  directives: [ScrollAreaComponent, NgIf, For],
   template: `
   <div>
     <div style="display: flex">

modules/benchmarks_external/src/naive_infinite_scroll/app.dart

@@ -10,7 +10,7 @@ import 'package:angular2/src/test_lib/benchmark_util.dart';
         <div style="display: flex">
           <scroll-area scroll-top="scrollTop"></scroll-area>
         </div>
-        <div ng-if="scrollAreas.length > 0">
+        <div *ng-if="scrollAreas.length > 0">
           <p>Following tables are only here to add weight to the UI:</p>
           <scroll-area ng-repeat="scrollArea in scrollAreas"></scroll-area>
         </div>

modules/benchmarks_external/src/tree/tree_benchmark.dart

@@ -50,8 +50,8 @@ main() {
     selector: 'tree',
     map: const {'data': '=>data'},
     template: '<span> {{data.value}}'
-    '<span ng-if="data.right != null"><tree data=data.right></span>'
+    '<span *ng-if="data.right != null"><tree data=data.right></span>'
-    '<span ng-if="data.left != null"><tree data=data.left></span>'
+    '<span *ng-if="data.left != null"><tree data=data.left></span>'
     '</span>')
 class TreeComponent {
   var data;

modules/examples/src/forms/index.es6

@@ -23,7 +23,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
         <div>
           <label>Title:</label> <br/>
           <input type="text" control="title"/>
-          <div *if="! header.controls.title.valid && header.controls.title.dirty">
+          <div *ng-if="! header.controls.title.valid && header.controls.title.dirty">
             Title is required
           </div>
         </div>
@@ -31,7 +31,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
         <div>
           <label>Description:</label> <br/>
           <textarea control="description"></textarea>
-          <div *if="! header.controls.description.valid && header.controls.description.dirty">
+          <div *ng-if="! header.controls.description.valid && header.controls.description.dirty">
             Description is required
           </div>
         </div>
@@ -79,7 +79,7 @@ class HeaderFields {
             <option value="checkbox">Checkbox</option>
             <option value="textarea">Textarea</option>
           </select>
-          <div *if="! question.controls.type.valid && question.controls.type.dirty">
+          <div *ng-if="! question.controls.type.valid && question.controls.type.dirty">
             Type is required
           </div>
         </div>
@@ -87,15 +87,15 @@ class HeaderFields {
         <div>
           <label>Question:</label> <br/>
           <input type="text" control="questionText">
-          <div *if="! question.controls.questionText.valid && question.controls.questionText.dirty">
+          <div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty">
             Question is required
           </div>
         </div>
 
-        <div *if="question.contains('responseLength')">
+        <div *ng-if="question.contains('responseLength')">
           <label>Response Length:</label> <br/>
           <input type="number" control="responseLength">
-          <div *if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
+          <div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
             Length is required
           </div>
         </div>