wardbell · Oct 18, 2017
diff --git a/aio/content/examples/aot-compiler/src/app/app.component.ts b/aio/content/examples/aot-compiler/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {

diff --git a/aio/content/examples/aot-compiler/src/index-jit.html b/aio/content/examples/aot-compiler/src/index-jit.html
@@ -19,6 +19,6 @@
   <!-- #enddocregion jit -->
   </head>
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
 </html>
diff --git a/aio/content/examples/aot-compiler/src/index.html b/aio/content/examples/aot-compiler/src/index.html
@@ -12,7 +12,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
   </head>
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
   <!-- #docregion bundle -->
   <script src="build.js"></script>

diff --git a/aio/content/examples/architecture/src/app/mini-app.ts b/aio/content/examples/architecture/src/app/mini-app.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 // #enddocregion import-core-component
 
 @Component({
- selector: 'my-app',
+ selector: 'app-root',
  template: 'Welcome to Angular'
 })
 export class AppComponent {

diff --git a/aio/content/examples/deployment/src/app/app.component.ts b/aio/content/examples/deployment/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>Simple Deployment</h1>
     <nav>

diff --git a/aio/content/examples/deployment/src/index.html b/aio/content/examples/deployment/src/index.html
@@ -32,7 +32,7 @@
   </head>
 
   <body>
-    <my-app></my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/http/e2e-spec.ts b/aio/content/examples/http/e2e-spec.ts
@@ -49,9 +49,9 @@ describe('Server Communication', function () {
   describe('Wikipedia Demo', function () {
 
     it('should initialize the demo with empty result list', function () {
-      let myWikiComp = element(by.tagName('my-wiki'));
-      expect(myWikiComp).toBeDefined('<my-wiki> must exist');
-      let resultList = myWikiComp.all(by.tagName('li'));
+      let wikiComp = element(by.tagName('app-wiki'));
+      expect(wikiComp).toBeDefined('<app-wiki> must exist');
+      let resultList = wikiComp.all(by.tagName('li'));
       expect(resultList.count()).toBe(0, 'result list must be empty');
     });
 
@@ -74,16 +74,16 @@ describe('Server Communication', function () {
     });
 
     function testForRefreshedResult(keyPressed: string, done: () => void) {
-      testForResult('my-wiki', keyPressed, false, done);
+      testForResult('app-wiki', keyPressed, false, done);
     }
   });
 
   describe('Smarter Wikipedia Demo', function () {
 
     it('should initialize the demo with empty result list', function () {
-      let myWikiSmartComp = element(by.tagName('my-wiki-smart'));
-      expect(myWikiSmartComp).toBeDefined('<my-wiki-smart> must exist');
-      let resultList = myWikiSmartComp.all(by.tagName('li'));
+      let wikiSmartComp = element(by.tagName('app-wiki-smart'));
+      expect(wikiSmartComp).toBeDefined('<app-wiki-smart> must exist');
+      let resultList = wikiSmartComp.all(by.tagName('li'));
       expect(resultList.count()).toBe(0, 'result list must be empty');
     });
 
@@ -105,11 +105,11 @@ describe('Server Communication', function () {
 
 
     function testForNewResult(keyPressed: string, done: () => void) {
-      testForResult('my-wiki-smart', keyPressed, false, done);
+      testForResult('app-wiki-smart', keyPressed, false, done);
     }
 
     function testForStaleResult(keyPressed: string, done: () => void) {
-      testForResult('my-wiki-smart', keyPressed, true, done);
+      testForResult('app-wiki-smart', keyPressed, true, done);
     }
 
   });

diff --git a/aio/content/examples/http/src/app/app.component.ts b/aio/content/examples/http/src/app/app.component.ts
@@ -2,12 +2,12 @@
 import { Component }         from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <hero-list></hero-list>
     <hero-list-promise></hero-list-promise>
-    <my-wiki></my-wiki>
-    <my-wiki-smart></my-wiki-smart>
+    <app-wiki></app-wiki>
+    <app-wiki-smart></app-wiki-smart>
   `
 })
 export class AppComponent { }
diff --git a/aio/content/examples/http/src/app/wiki/wiki-smart.component.ts b/aio/content/examples/http/src/app/wiki/wiki-smart.component.ts
@@ -16,7 +16,7 @@ import { Subject } from 'rxjs/Subject';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
-  selector: 'my-wiki-smart',
+  selector: 'app-wiki-smart',
   template: `
     <h1>Smarter Wikipedia Demo</h1>
     <p>Search when typing stops</p>

diff --git a/aio/content/examples/http/src/app/wiki/wiki.component.ts b/aio/content/examples/http/src/app/wiki/wiki.component.ts
@@ -5,7 +5,7 @@ import { Observable }       from 'rxjs/Observable';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
-  selector: 'my-wiki',
+  selector: 'app-wiki',
   template: `
     <h1>Wikipedia Demo</h1>
     <p>Search after each keystroke</p>

diff --git a/aio/content/examples/http/src/index.html b/aio/content/examples/http/src/index.html
@@ -21,7 +21,7 @@
   </head>
 
   <body>
-      <my-app></my-app>
+      <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/i18n/e2e-spec.ts b/aio/content/examples/i18n/e2e-spec.ts
@@ -13,7 +13,7 @@ describe('i18n E2E Tests', () => {
   });
 
   it('should display the node texts without elements', function () {
-    expect(element(by.css('my-app')).getText()).toContain('No genero ningún elemento');
+    expect(element(by.css('app-root')).getText()).toContain('No genero ningún elemento');
   });
 
   it('should display the translated title attribute', function () {

diff --git a/aio/content/examples/i18n/src/app/app.component.ts b/aio/content/examples/i18n/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {

diff --git a/aio/content/examples/i18n/src/index.html b/aio/content/examples/i18n/src/index.html
@@ -34,6 +34,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.ts b/aio/content/examples/ngcontainer/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 import { heroes } from './hero';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })

diff --git a/aio/content/examples/ngcontainer/src/index.html b/aio/content/examples/ngcontainer/src/index.html
@@ -6,7 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   <body>
-    <my-app>Loading...</my-apps>
+    <app-root>Loading...</app-roots>
   </body>
 
 </html>
diff --git a/aio/content/examples/quickstart/src/app/app.component.ts b/aio/content/examples/quickstart/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `<h1>Hello {{name}}</h1>`
 })
 export class AppComponent { name = 'Angular'; }
diff --git a/aio/content/examples/quickstart/src/index.html b/aio/content/examples/quickstart/src/index.html
@@ -23,9 +23,9 @@
   </head>
 
   <body>
-    <!-- #docregion my-app-->
-    <my-app>Loading AppComponent content here ...</my-app>
-    <!-- #enddocregion my-app-->
+    <!-- #docregion app-root-->
+    <app-root>Loading AppComponent content here ...</app-root>
+    <!-- #enddocregion app-root-->
   </body>
 
 </html>
diff --git a/aio/content/examples/setup/src/app/app.component.ts b/aio/content/examples/setup/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `<h1>Hello {{name}}</h1>`
 })
 export class AppComponent { name = 'Angular'; }
diff --git a/aio/content/examples/setup/src/index.html b/aio/content/examples/setup/src/index.html
@@ -20,9 +20,9 @@
   </head>
 
   <body>
-    <!-- #docregion my-app-->
-    <my-app><!-- content managed by Angular --></my-app>
-    <!-- #enddocregion my-app-->
+    <!-- #docregion app-root-->
+    <app-root><!-- content managed by Angular --></app-root>
+    <!-- #enddocregion app-root-->
   </body>
 
 </html>
diff --git a/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts b/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
@@ -37,15 +37,15 @@ describe('Structural Directives', function () {
     expect(paragraph.count()).toEqual(1);
   });
 
-  it('myUnless should show 3 paragraph (A)s and (B)s at the start', function () {
+  it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
     const paragraph = element.all(by.css('p.unless'));
     expect(paragraph.count()).toEqual(3);
     for (let i = 0; i < 3; i++) {
       expect(paragraph.get(i).getText()).toContain('(A)');
     }
   });
 
-  it('myUnless should show 1 paragraph (B) after toggling condition', function () {
+  it('appUnless should show 1 paragraph (B) after toggling condition', function () {
     const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
     const paragraph = element.all(by.css('p.unless'));
 

diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts
@@ -8,7 +8,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * Add the template content to the DOM unless the condition is true.
 // #enddocregion no-docs
  *
- * If the expression assigned to `myUnless` evaluates to a truthy value
+ * If the expression assigned to `appUnless` evaluates to a truthy value
  * then the templated elements are removed removed from the DOM,
  * the templated elements are (re)inserted into the DOM.
  *
@@ -18,8 +18,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  *
  * ### Syntax
  *
- * - `<div *myUnless="condition">...</div>`
- * - `<ng-template [myUnless]="condition"><div>...</div></ng-template>`
+ * - `<div *appUnless="condition">...</div>`
+ * - `<ng-template [appUnless]="condition"><div>...</div></ng-template>`
  *
 // #docregion no-docs
  */

diff --git a/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts b/aio/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
@@ -11,7 +11,7 @@ class Hero {
 }
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
       <h1>{{title}}</h1>
       <pre>{{heroes | json}}</pre>

diff --git a/aio/content/examples/testing/src/app/bag/bag.spec.ts b/aio/content/examples/testing/src/app/bag/bag.spec.ts
@@ -425,7 +425,7 @@ describe('TestBed Component Overrides:', () => {
   it('injected provider should not be same as component\'s provider', () => {
 
     // TestComponent is parent of TestProvidersComponent
-    @Component({ template: '<my-service-comp></my-service-comp>' })
+    @Component({ template: '<app-service-comp></app-service-comp>' })
     class TestComponent {}
 
     // 3 levels of FancyService provider: module, TestCompomponent, TestProvidersComponent

diff --git a/aio/content/examples/testing/src/app/bag/bag.ts b/aio/content/examples/testing/src/app/bag/bag.ts
@@ -222,15 +222,15 @@ export class IoParentComponent {
 }
 
 @Component({
-  selector: 'my-if-comp',
+  selector: 'app-if-comp',
   template: `MyIf(<span *ngIf="showMore">More</span>)`
 })
 export class MyIfComponent {
   showMore = false;
 }
 
 @Component({
-  selector: 'my-service-comp',
+  selector: 'app-service-comp',
   template: `injected value: {{fancyService.value}}`,
   providers: [FancyService]
 })
@@ -240,7 +240,7 @@ export class TestProvidersComponent {
 
 
 @Component({
-  selector: 'my-service-comp',
+  selector: 'app-service-comp',
   template: `injected value: {{fancyService.value}}`,
   viewProviders: [FancyService]
 })
@@ -287,7 +287,7 @@ export class NeedsContentComponent {
 
 ///////// MyIfChildComp ////////
 @Component({
-  selector: 'my-if-child-1',
+  selector: 'app-if-child-1',
 
   template: `
     <h4>MyIfChildComp</h4>
@@ -338,7 +338,7 @@ export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy {
 ///////// MyIfParentComp ////////
 
 @Component({
-  selector: 'my-if-parent-comp',
+  selector: 'app-if-parent-comp',
   template: `
     <h3>MyIfParentComp</h3>
     <label>Parent value:
@@ -347,7 +347,7 @@ export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy {
     <button (click)="clicked()">{{toggleLabel}} Child</button><br>
     <div *ngIf="showChild"
          style="margin: 4px; padding: 4px; background-color: aliceblue;">
-      <my-if-child-1  [(value)]="parentValue"></my-if-child-1>
+      <app-if-child-1  [(value)]="parentValue"></app-if-child-1>
     </div>
   `
 })
@@ -387,7 +387,7 @@ export class ShellComponent { }
   selector: 'bag-comp',
   template: `
     <h1>Specs Bag</h1>
-    <my-if-parent-comp></my-if-parent-comp>
+    <app-if-parent-comp></app-if-parent-comp>
     <hr>
     <h3>Input/Output Component</h3>
     <io-parent-comp></io-parent-comp>

diff --git a/aio/content/examples/universal/src/app/app.component.ts b/aio/content/examples/universal/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component }          from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
     <nav>

diff --git a/aio/content/examples/universal/src/app/dashboard.component.ts b/aio/content/examples/universal/src/app/dashboard.component.ts
@@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
 import { Observable } from 'rxjs/Observable';
 
 @Component({
-  selector: 'my-dashboard',
+  selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
 })

diff --git a/aio/content/examples/universal/src/app/hero-detail.component.ts b/aio/content/examples/universal/src/app/hero-detail.component.ts
@@ -7,7 +7,7 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'my-hero-detail',
+  selector: 'app-hero-detail',
   templateUrl: './hero-detail.component.html',
   styleUrls: [ './hero-detail.component.css' ]
 })

diff --git a/aio/content/examples/universal/src/app/heroes.component.ts b/aio/content/examples/universal/src/app/heroes.component.ts
@@ -6,7 +6,7 @@ import { Hero }                from './hero';
 import { HeroService }         from './hero.service';
 
 @Component({
-  selector: 'my-heroes',
+  selector: 'app-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: [ './heroes.component.css' ]
 })

diff --git a/aio/content/examples/universal/src/index-universal.html b/aio/content/examples/universal/src/index-universal.html
@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
   <!-- #docregion client-app-bundle -->
   <script src="client.js"></script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ @@
       </head>
       <body>
-        <my-app></my-app>
+        <app-root></app-root>
       </body>
     </html>