docs: convert the last my-app components to app-root (angular#42256)

petebacondarwin · zarend · commit c2ed612da3b0 · 2021-05-25T22:13:36.000Z
Most of these were fixed in other PRs but there were are couple of stragglers. Note that `my-app` components in non-documentation facing code, such as compliance tests have not been changed. Fixes angular#20235 PR Close angular#42256
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!');

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export class TooltipDirective {`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`@Component({`
`20`		`- selector: 'my-app',`
	`20`	`+ selector: 'app-root',`
`21`	`21`	`template: 'Hello World!'`
`22`	`22`	`})`
`23`	`23`	`class MyAppComponent {`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import {Component, NgModule} from '@angular/core';`
`11`	`11`	`import {BrowserModule} from '@angular/platform-browser';`
`12`	`12`	`import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';`
`13`	`13`
`14`		`-@Component({selector: 'my-app', template: 'empty'})`
	`14`	`+@Component({selector: 'app-root', template: 'empty'})`
`15`	`15`	`class MyApp {`
`16`	`16`	`}`
`17`	`17`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import {Component, NgModule} from '@angular/core';`
`10`	`10`	`import {BrowserModule} from '@angular/platform-browser';`
`11`	`11`	`import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';`
`12`	`12`
`13`		`-@Component({selector: 'my-app', template: 'Hello {{ name }}!'})`
	`13`	`+@Component({selector: 'app-root', template: 'Hello {{ name }}!'})`
`14`	`14`	`class MyApp {`
`15`	`15`	`name: string = 'World';`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import {Component, createPlatformFactory} from '@angular/core';`
`10`	`10`	`import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';`
`11`	`11`
`12`	`12`	`// #docregion longform`
`13`		`-@Component({selector: 'my-app', template: 'Hello World'})`
	`13`	`+@Component({selector: 'app-root', template: 'Hello World'})`
`14`	`14`	`class MyApp {`
`15`	`15`	`}`
`16`	`16`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ import {ɵresetJitOptions as resetJitOptions} from '@angular/core';`
`24`	`24`	`*`
`25`	`25`	* ```
`26`	`26`	`* describe('something', () => {`
`27`		`- * it('should do something', withBody('<my-app></my-app>', async () => {`
	`27`	`+ * it('should do something', withBody('<app-root></app-root>', async () => {`
`28`	`28`	`* const myApp = renderComponent(MyApp);`
`29`	`29`	`* await whenRendered(myApp);`
`30`	`30`	`* expect(getRenderedText(myApp)).toEqual('Hello World!');`