docs: apply suggestions from code review

josmar-crwdstffng · TMDavisGoogle · josmar-crwdstffng · commit f05ce1ad1649 · 2022-04-08T08:49:22.000-07:00
Apply editorial suggestions for peer review.

Co-authored-by: Tiffany Davis &lt;88161089+TMDavisGoogle@users.noreply.github.com&gt;
diff --git a/aio/content/cli/index.md b/aio/content/cli/index.md
@@ -47,7 +47,7 @@ When you use the [ng serve](cli/serve) command to build an application and serve
 When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory.
 Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
 
-If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
+If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>`.
 
 </div>
 
@@ -119,7 +119,7 @@ Options that specify files can be given as absolute paths, or as paths relative
 
 ### Schematics
 
-The [ng generate](cli/generate) and [ng add](cli/add) commands take as an argument the artifact or library to be generated or added to the current project.
+The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
 In addition to any general options, each artifact or library defines its own options in a *schematic*.
 Schematic options are supplied to the command in the same format as immediate command options.
 
diff --git a/aio/content/errors/NG0100.md b/aio/content/errors/NG0100.md
@@ -9,7 +9,7 @@ Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expressi
 
 In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occur, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
 
-This error commonly occurs when you've added template expressions or begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or a child component changes its parent bindings.
+This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.
 
 @debugging
 
diff --git a/aio/content/errors/NG0200.md b/aio/content/errors/NG0200.md
@@ -7,7 +7,8 @@
 A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
 
 @debugging
-Use the call stack to determine where the cyclical dependency exists. You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service's dependencies and identify the loop causing the problem.
+Use the call stack to determine where the cyclical dependency exists.
+You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.
 
 Break this loop \(or circle\) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
 
diff --git a/aio/content/errors/NG0301.md b/aio/content/errors/NG0301.md
@@ -4,7 +4,7 @@
 @shortDescription Export not found!
 
 @description
-Angular can't find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates, and you've forgotten to [import the corresponding modules](guide/sharing-ngmodules).
+Angular can't find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates and you've forgotten to [import the corresponding modules](guide/sharing-ngmodules).
 
 <div class="alert is-helpful">
 
diff --git a/aio/content/errors/NG2003.md b/aio/content/errors/NG2003.md
@@ -6,8 +6,8 @@
 There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
 
 @debugging
-Look at the parameter that throws the error and all uses of the class.
-This error is commonly thrown when a constructor defines parameters with primitive types like `string`, `number`, `boolean`, and `Object`.
+Look at the parameter that throws the error, and all uses of the class.
+This error is commonly thrown when a constructor defines parameters with primitive types such as `string`, `number`, `boolean`, and `Object`.
 
 Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified \(has a runtime representation\). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
 
diff --git a/aio/content/errors/NG3003.md b/aio/content/errors/NG3003.md
@@ -4,7 +4,7 @@
 
 @description
 
-A component, directive or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
+A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
 For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
 
 <code-example header="parent.component.ts" path="errors/cyclic-imports/parent.component.ts"></code-example>
@@ -18,7 +18,7 @@ There is already an import from `child.component.ts` to `parent.component.ts` si
 **NOTE**: <br />
 The parent component's template contains `<child></child>`.
 The generated code for this template must therefore contain a reference to the `ChildComponent` class.
-In order to make this reference the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would  cause an import cycle:
+In order to make this reference, the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would cause an import cycle:
 
 <code-example format="none" language="none">
 
@@ -30,12 +30,12 @@ parent.component.ts -&gt; child.component.ts -&gt; parent.component.ts
 
 ### Remote Scoping
 
-To avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component is declared that wires up the dependencies.
+To avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
 This is known as "remote scoping".
 
 ### Libraries
 
-Unfortunately, "remote scoping" code is side-effectful, which prevents tree shaking, and cannot be used in libraries.
+Unfortunately, "remote scoping" code is side-effectful &mdash;which prevents tree shaking&mdash; and cannot be used in libraries.
 So when building libraries using the `"compilationMode": "partial"` setting, any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
 
 @debugging
@@ -50,11 +50,11 @@ The component ChildComponent is used in the template but importing it would crea
 
 </code-example>
 
-Use this to identify how the referenced component, pipe or directive has a dependency back to the component being compiled.
+Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
 Here are some ideas for fixing the problem:
 
-*   Try to re-arrange your dependencies to avoid the cycle.
-    For example using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
+*   Try to rearrange your dependencies to avoid the cycle.
+    For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
 
 *   Move the classes that reference each other into the same file, to avoid any imports between them.
 *   Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
diff --git a/aio/content/extended-diagnostics/NG8101.md b/aio/content/extended-diagnostics/NG8101.md
@@ -13,7 +13,7 @@ This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings
 ## What's wrong with that?
 
 As it stands, `([var])` is actually an [event binding](guide/event-binding) with the name `[var]`.
-The author likely intended this as a two-way binding to a variable named `var` but as written this binding has no effect.
+The author likely intended this as a two-way binding to a variable named `var` but, as written, this binding has no effect.
 
 ## What should I do instead?
 
diff --git a/aio/content/extended-diagnostics/NG8102.md b/aio/content/extended-diagnostics/NG8102.md
@@ -32,7 +32,7 @@ This can lead to confusion about the expected output of the program.
 ## What should I do instead?
 
 Update the template and declared type to be in sync.
-Double check the type of the input and confirm whether it is actually expected to be nullable.
+Double-check the type of the input and confirm whether it is actually expected to be nullable.
 
 If the input should be nullable, add `null` or `undefined` to its type to indicate this.
 
diff --git a/aio/content/extended-diagnostics/index.md b/aio/content/extended-diagnostics/index.md
@@ -2,7 +2,7 @@
 
 There are many coding patterns that are technically valid to the compiler or runtime, but which may have complex nuances or caveats.
 These patterns may not have the intended effect expected by a developer, which often leads to bugs.
-The Angular compiler includes "extended diagnostics" which identify many of these patterns to warn developers about the potential issues and enforce common best practices within a codebase.
+The Angular compiler includes "extended diagnostics" which identify many of these patterns, in order to warn developers about the potential issues and enforce common best practices within a codebase.
 
 ## Diagnostics
 
diff --git a/aio/content/guide/accessibility.md b/aio/content/guide/accessibility.md
@@ -61,7 +61,7 @@ For example:
     See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
 
 *   The `cdkTrapFocus` directive traps Tab-key focus within an element.
-    Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
+    Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.
 
 For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
 
diff --git a/aio/content/guide/app-shell.md b/aio/content/guide/app-shell.md
@@ -29,7 +29,7 @@ ng generate app-shell
 
 </code-example>
 
-For more information about this command see [App shell command](cli/generate#app-shell-command).
+For more information about this command, see [App shell command](cli/generate#app-shell-command).
 
 After running this command you can see that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
 
diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md
@@ -39,7 +39,7 @@ A root NgModule has no reason to *export* anything because other modules don't n
 ## NgModules and components
 
 NgModules provide a *compilation context* for their components.
-A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template.
+A root NgModule always has a root component that is created during bootstrap but any NgModule can include any number of additional components, which can be loaded through the router or created through the template.
 The components that belong to an NgModule share a compilation context.
 
 <div class="lightbox">
@@ -77,7 +77,7 @@ The hierarchical structure of views is a key factor in the way Angular detects a
 
 ## NgModules and JavaScript modules
 
-The NgModule system is different from and unrelated to the JavaScript \(ES2015\) module system for managing collections of JavaScript objects.
+The NgModule system is different from, and unrelated to, the JavaScript \(ES2015\) module system for managing collections of JavaScript objects.
 These are *complementary* module systems that you can use together to write your applications.
 
 In JavaScript each *file* is a module and all objects defined in the file belong to that module.
@@ -124,7 +124,7 @@ To access that material, add it to the `@NgModule` metadata `imports` like this.
 
 <code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports"></code-example>
 
-In this way you're using the Angular and JavaScript module systems *together*.
+In this way, you're using the Angular and JavaScript module systems *together*.
 Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
 
 <div class="alert is-helpful">
diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md
@@ -47,7 +47,7 @@ Similarly, use the `@Injectable()` decorator to indicate that a component or oth
     Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed.
     You don't have to create injectors.
 
-*   An injector creates dependencies, and maintains a *container* of dependency instances that it reuses if possible
+*   An injector creates dependencies and maintains a *container* of dependency instances that it reuses, if possible.
 *   A *provider* is an object that tells an injector how to obtain or create a dependency
 
 For any dependency that you need in your app, you must register a provider with the application's injector, so that the injector can use the provider to create new instances.
@@ -65,7 +65,7 @@ For example, the constructor of `HeroListComponent` needs `HeroService`.
 <code-example header="src/app/hero-list.component.ts (constructor)" path="architecture/src/app/hero-list.component.ts" region="ctor"></code-example>
 
 When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service.
-If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
+If a requested service instance doesn't yet exist, the injector makes one using the registered provider and adds it to the injector before returning the service to Angular.
 
 When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
 
diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md
@@ -131,9 +131,9 @@ This example shows you how to toggle the disabled property from the component.
 
 Angular provides three categories of data binding according to the direction of data flow:
 
-*   From the source to view
+*   From source to view
 *   From view to source
-*   In a two way sequence of view to source to view
+*   In a two-way sequence of view to source to view
 
 | Type                                                                     | Syntax                                                                       | Category |
 |:---                                                                      |:---                                                                          |:---      |
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md
@@ -43,7 +43,7 @@ The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
 | metadata object | Details |
 |:---             |:---     |
 | declarations    | This application's lone component.                                                                          |
-| imports         | Import `BrowserModule` to have browser specific services such as DOM rendering, sanitization, and location. |
+| imports         | Import `BrowserModule` to have browser-specific services such as DOM rendering, sanitization, and location. |
 | providers       | The service providers.                                                                                      |
 | bootstrap       | The *root* component that Angular creates and inserts into the `index.html` host web page.                  |
 
@@ -63,7 +63,7 @@ The `declarations` array only takes declarables. Declarables are components, [di
 All of a module's declarables must be in the `declarations` array.
 Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module.
 
-These declared classes are visible within the module but invisible to components in a different module unless they are exported from this module and the other module imports this one.
+These declared classes are visible within the module but invisible to components in a different module, unless they are exported from this module and the other module imports this one.
 
 An example of what goes into a declarations array follows:
 
@@ -78,7 +78,7 @@ declarations: [
 </code-example>
 
 A declarable can only belong to one module, so only declare it in one `@NgModule`.
-When you need it elsewhere, import the module that has the declarable you need in it.
+When you need it elsewhere, import the module that contains the declarable you need.
 
 ### Using directives with `@NgModule`
 
@@ -94,7 +94,7 @@ The following example, named `ItemDirective` is the default directive structure
 
 <code-example header="src/app/item.directive.ts" path="bootstrapping/src/app/item.directive.ts" region="directive"></code-example>
 
-The key point here is that you have to export it so you can import it elsewhere.
+The key point here is that you have to export it, so that you can import it elsewhere.
 Next, import it into the `NgModule`, in this example `app.module.ts`, with a JavaScript import statement:
 
 <code-example header="src/app/app.module.ts" path="bootstrapping/src/app/app.module.ts" region="directive-import"></code-example>
@@ -123,7 +123,7 @@ It tells Angular about other NgModules that this particular module needs to func
 
 This list of modules are those that export components, directives, or pipes that component templates in this module reference.
 In this case, the component is `AppComponent`, which references components, directives, or pipes in `BrowserModule`, `FormsModule`, or  `HttpClientModule`.
-A component template can reference another component, directive, or pipe when the referenced class is declared in this module or the class was imported from another module.
+A component template can reference another component, directive, or pipe when the referenced class is declared in this module, or the class was imported from another module.
 
 <a id="bootstrap-array"></a>
 
diff --git a/aio/content/guide/complex-animation-sequences.md b/aio/content/guide/complex-animation-sequences.md
diff --git a/aio/content/guide/dependency-injection-providers.md b/aio/content/guide/dependency-injection-providers.md
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md
