petebacondarwin · May 23, 2021
diff --git a/aio/content/examples/routing-with-urlmatcher/src/app/app.component.ts b/aio/content/examples/routing-with-urlmatcher/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component, VERSION } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })

diff --git a/aio/content/examples/routing-with-urlmatcher/src/index.html b/aio/content/examples/routing-with-urlmatcher/src/index.html
@@ -4,6 +4,6 @@
     <title>Angular App</title>
   </head>
   <body>
-  <my-app>loading</my-app>
+  <app-root>loading</app-root>
   </body>
 </html>
diff --git a/aio/content/guide/template-typecheck.md b/aio/content/guide/template-typecheck.md
@@ -156,7 +156,7 @@ The `AppComponent` template uses this component as follows:
 
 ```ts
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: '<user-detail [user]="selectedUser" />',
 })
 export class AppComponent {

diff --git a/packages/core/src/render3/STORING_METADATA_IN_D.TS.md b/packages/core/src/render3/STORING_METADATA_IN_D.TS.md
@@ -17,7 +17,7 @@ export class TooltipDirective {
 }
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: 'Hello World!'
 })
 class MyAppComponent {

diff --git a/packages/core/src/render3/util/discovery_utils.ts b/packages/core/src/render3/util/discovery_utils.ts
@@ -31,17 +31,19 @@ import {getTNode, unwrapRNode} from './view_utils';
  *
  * @usageNotes
  * Given the following DOM structure:
+ *
  * ```html
- * <my-app>
+ * <app-root>
  *   <div>
  *     <child-comp></child-comp>
  *   </div>
- * </my-app>
+ * </app-root>
  * ```
+ *
  * Calling `getComponent` on `<child-comp>` will return the instance of `ChildComponent`
  * associated with this DOM element.
  *
- * Calling the function on `<my-app>` will return the `MyApp` instance.
+ * Calling the function on `<app-root>` will return the `MyApp` instance.
  *
  *
  * @param element DOM element from which the component should be retrieved.
@@ -177,12 +179,14 @@ export function getInjectionTokens(element: Element): any[] {
  *
  * @usageNotes
  * Given the following DOM structure:
- * ```
- * <my-app>
+ *
+ * ```html
+ * <app-root>
  *   <button my-button></button>
  *   <my-comp></my-comp>
- * </my-app>
+ * </app-root>
  * ```
+ *
  * Calling `getDirectives` on `<button>` will return an array with an instance of the `MyButton`
  * directive that is associated with the DOM node.
  *
@@ -360,14 +364,16 @@ export interface Listener {
  *
  * @usageNotes
  * Given the following DOM structure:
- * ```
- * <my-app>
- *   <div (click)="doSomething()"></div>
- * </my-app>
  *
+ * ```html
+ * <app-root>
+ *   <div (click)="doSomething()"></div>
+ * </app-root>
  * ```
+ *
  * Calling `getListeners` on `<div>` will return an object that looks as follows:
- * ```
+ *
+ * ```ts
  * {
  *   name: 'click',
  *   element: <div>,

diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts
@@ -109,7 +109,7 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
    *
    * ```typescript
    * @Component({
-   *   selector: 'my-app',
+   *   selector: 'app-root',
    *   template: `Number of ticks: {{numberOfTicks}}`
    *   changeDetection: ChangeDetectionStrategy.OnPush,
    * })
@@ -231,7 +231,7 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
    * }
    *
    * @Component({
-   *   selector: 'my-app',
+   *   selector: 'app-root',
    *   providers: [DataProvider],
    *   template: `
    *     Live Update: <input type="checkbox" [(ngModel)]="live">

diff --git a/packages/examples/compiler/ts/url_resolver/url_resolver.ts b/packages/examples/compiler/ts/url_resolver/url_resolver.ts
@@ -11,7 +11,7 @@ import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-@Component({selector: 'my-app', template: 'empty'})
+@Component({selector: 'app-root', template: 'empty'})
 class MyApp {
 }
 

diff --git a/packages/examples/core/ts/bootstrap/bootstrap.ts b/packages/examples/core/ts/bootstrap/bootstrap.ts
@@ -10,7 +10,7 @@ import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-@Component({selector: 'my-app', template: 'Hello {{ name }}!'})
+@Component({selector: 'app-root', template: 'Hello {{ name }}!'})
 class MyApp {
   name: string = 'World';
 }

diff --git a/packages/examples/core/ts/change_detect/change-detection.ts b/packages/examples/core/ts/change_detect/change-detection.ts
@@ -12,7 +12,7 @@ import {FormsModule} from '@angular/forms';
 
 // #docregion mark-for-check
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `Number of ticks: {{numberOfTicks}}`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/packages/examples/core/ts/metadata/encapsulation.ts b/packages/examples/core/ts/metadata/encapsulation.ts
@@ -10,7 +10,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 // #docregion longform
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>Hello World!</h1>
     <span class="red">Shadow DOM Rocks!</span>

diff --git a/packages/examples/core/ts/platform/platform.ts b/packages/examples/core/ts/platform/platform.ts
@@ -10,7 +10,7 @@ import {Component, createPlatformFactory} from '@angular/core';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 // #docregion longform
-@Component({selector: 'my-app', template: 'Hello World'})
+@Component({selector: 'app-root', template: 'Hello World'})
 class MyApp {
 }
 

diff --git a/packages/private/testing/src/render3.ts b/packages/private/testing/src/render3.ts
@@ -24,7 +24,7 @@ import {ɵresetJitOptions as resetJitOptions} from '@angular/core';
  *
  * ```
  * describe('something', () => {
- *   it('should do something', withBody('<my-app></my-app>', async () => {
+ *   it('should do something', withBody('<app-root></app-root>', async () => {
  *     const myApp = renderComponent(MyApp);
  *     await whenRendered(myApp);
  *     expect(getRenderedText(myApp)).toEqual('Hello World!');