refactor: fix a number of typos throughout the codebase (angular#52249)

Fix some typos such as `boostrap`, `propery` and more, both in
documentation and in code (comments, identifiers).

PR Close angular#52249

Author: ranma42

aio/content/examples/built-in-directives/src/app/app.component.ts

@@ -22,7 +22,7 @@ import {StoutItemComponent} from './item-switch.component';
   imports: [
     CommonModule, // <-- import into the component
     // #enddocregion import-common-module
-    FormsModule, // <--- import into the omponent
+    FormsModule, // <--- import into the component
     // #enddocregion import-forms-module
     ItemDetailComponent,
     ItemSwitchComponents,

aio/content/guide/deprecations.md

@@ -425,7 +425,7 @@ They should all be configured using other methods, all of which have been
 documented.
 
 The following strategies are meant to be configured by registering the
-application strategy in DI via the `providers` in the configuration of `boostrapApplication()` for a "Standalone" app or 
+application strategy in DI via the `providers` in the configuration of `bootstrapApplication()` for a "Standalone" app or 
 in the root `app.module` of an NgModule app:
 * `routeReuseStrategy`
 

aio/content/guide/doc-github-tasks.md

@@ -374,7 +374,7 @@ Either way, the procedure to update your branch is the same.
 
     </code-example>
 
-    If you have any un-commited changes, [Commit your changes on your local computer](#commit-your-changes-on-your-local-computer) before you continue.
+    If you have any un-committed changes, [Commit your changes on your local computer](#commit-your-changes-on-your-local-computer) before you continue.
 
 1.  Rebase your branch to add the changes in your branch to the current content in the `main` branch.
 

aio/content/guide/hierarchical-dependency-injection.md

@@ -132,7 +132,7 @@ The following diagram represents the relationship between the `root` `ModuleInje
 While the name `root` is a special alias, other `EnvironmentInjector` hierarchies don't have aliases.
 You have the option to create `EnvironmentInjector` hierarchies whenever a dynamically loaded component is created, such as with the Router, which will create child `EnvironmentInjector` hierarchies.
 
-All requests forward up to the root injector, whether you configured it with the `ApplicationConfig` instance passed to the `boostrapApplication()` method, or registered all providers with `root` in their own services.
+All requests forward up to the root injector, whether you configured it with the `ApplicationConfig` instance passed to the `bootstrapApplication()` method, or registered all providers with `root` in their own services.
 
 <div class="callout is-helpful">
 

aio/content/guide/http-intercept-requests-and-responses.md

@@ -58,7 +58,7 @@ This required setting tells Angular that `HTTP_INTERCEPTORS` is a token for a *m
 Because interceptors are optional dependencies of the `HttpClient` service, you must provide them in the same injector or a parent of the injector that provides `HttpClient`.
 Interceptors provided *after* DI creates the `HttpClient` are ignored.
 
-This app provides `HttpClient` in the app's root injector by adding the `HttpClientModule` to the `providers` array of the `boostrapApplication()` in `main.ts`.
+This app provides `HttpClient` in the app's root injector by adding the `HttpClientModule` to the `providers` array of the `bootstrapApplication()` in `main.ts`.
 You should provide interceptors there as well.
 
 <code-example path="http/src/main.ts" region="noop-provider"></code-example>
@@ -67,7 +67,7 @@ You should provide interceptors there as well.
 
 There's a good chance that you'll create more interceptors.
 
-You *could* add each provider to the `providers` array of the `boostrapApplication()` as you did for the `NoopInterceptor`.
+You *could* add each provider to the `providers` array of the `bootstrapApplication()` as you did for the `NoopInterceptor`.
 
 That's rather verbose and there's a good chance that you'll make a bookkeeping mistake trying to remember to add each one.
 

aio/content/guide/observables.md

@@ -69,7 +69,7 @@ You're more likely interested in doing something with the values. Pass in a meth
 
 <code-example header="Subscribe to emitted values" path="observables/src/subscribing.ts" region="next-param"></code-example>
 
-Passing a `next()` function into `subcribe` is a convenient syntax for this most typical case. If you also need to know when the observable emits an error or completes, you'll have to pass in an `Observer` instead.
+Passing a `next()` function into `subscribe` is a convenient syntax for this most typical case. If you also need to know when the observable emits an error or completes, you'll have to pass in an `Observer` instead.
 
 ## Defining observers
 

aio/content/tutorial/first-app/first-app-lesson-08.md

@@ -36,7 +36,7 @@ Now the app has a dataset that you can use to display the entries in the browser
 1.  Update the `<app-housing-location>` tag in the template code to this:
     <code-example header="Add ngFor to HomeComponent template" path="first-app-lesson-08/src/app/home/home.component.ts" region="add-ngFor"></code-example>
 
-    Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it refered to the property on the `HomeComponent` class.
+    Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `HomeComponent` class.
 
 1.  Save all changes.
 

aio/content/tutorial/first-app/first-app-lesson-14.md

@@ -153,7 +153,7 @@ The data source has been configured, the next step is to update your web app to
 
     1.  Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
 
-        <code-example anguage="javascript" format="javascript">
+        <code-example language="javascript" format="javascript">
         url = 'http://localhost:3000/locations';
         </code-example>
 

aio/src/app/app.component.spec.ts

@@ -922,7 +922,7 @@ describe('AppComponent', () => {
     });
 
     describe('initial rendering', () => {
-      const originialReducedMotion = AppComponent.reducedMotion;
+      const originalReducedMotion = AppComponent.reducedMotion;
 
       beforeEach(() => {
         jasmine.clock().install();
@@ -931,7 +931,7 @@ describe('AppComponent', () => {
 
       afterEach(() => {
         jasmine.clock().uninstall();
-        AppComponent.reducedMotion = originialReducedMotion;
+        AppComponent.reducedMotion = originalReducedMotion;
       });
 
       it('should initially disable Angular animations until a document is rendered', () => {
@@ -1056,7 +1056,7 @@ describe('AppComponent', () => {
     });
 
     describe('disableAnimations', () => {
-      const originialReducedMotion = AppComponent.reducedMotion;
+      const originalReducedMotion = AppComponent.reducedMotion;
 
       beforeEach(() => {
         jasmine.clock().install();
@@ -1065,7 +1065,7 @@ describe('AppComponent', () => {
 
       afterEach(() => {
         jasmine.clock().uninstall();
-        AppComponent.reducedMotion = originialReducedMotion;
+        AppComponent.reducedMotion = originalReducedMotion;
       });
 
       it('should initially be true', () => {

aio/src/app/layout/notification/notification.component.html

@@ -2,6 +2,6 @@
   <ng-content></ng-content>
 </span>
 
-<button mat-icon-button class="close-button" [attr.aria-label]="'Close' + bannerNotficationDescription" (click)="dismiss()">
+<button mat-icon-button class="close-button" [attr.aria-label]="'Close' + bannerNotificationDescription" (click)="dismiss()">
   <mat-icon svgIcon="close"></mat-icon>
 </button>