diff --git a/adev/src/content/guide/animations/overview.md b/adev/src/content/guide/animations/overview.md index cd2e30af9cb..e1d042d6344 100644 --- a/adev/src/content/guide/animations/overview.md +++ b/adev/src/content/guide/animations/overview.md @@ -82,11 +82,9 @@ HELPFUL: Let's create a new `open-close` component to animate with simple transi Run the following command in terminal to generate the component: - - +```shell ng g component open-close - - +``` This will create the component at `src/app/open-close.component.ts`. diff --git a/adev/src/content/guide/aria/overview.md b/adev/src/content/guide/aria/overview.md index 3409caf4615..0610bae0408 100644 --- a/adev/src/content/guide/aria/overview.md +++ b/adev/src/content/guide/aria/overview.md @@ -9,9 +9,9 @@ Angular Aria is a collection of headless, accessible directives that implement c ## Installation - +```shell ng add @angular/aria - +``` ## Showcase / Demonstration diff --git a/adev/src/content/guide/directives/attribute-directives.md b/adev/src/content/guide/directives/attribute-directives.md index 6e7eadcdd44..90a479b1953 100644 --- a/adev/src/content/guide/directives/attribute-directives.md +++ b/adev/src/content/guide/directives/attribute-directives.md @@ -8,11 +8,9 @@ This section walks you through creating a highlight directive that sets the back 1. To create a directive, use the CLI command [`ng generate directive`](tools/cli/schematics). - - + ```shell ng generate directive highlight - - + ``` The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`. diff --git a/adev/src/content/guide/drag-drop.md b/adev/src/content/guide/drag-drop.md index 645dff95cde..15e9bc97612 100644 --- a/adev/src/content/guide/drag-drop.md +++ b/adev/src/content/guide/drag-drop.md @@ -21,9 +21,9 @@ For the full API reference, please see the [Angular CDK's drag and drop API refe The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI: - - ng add @angular/cdk - +```shell +ng add @angular/cdk +``` ### Importing drag and drop diff --git a/adev/src/content/guide/forms/reactive-forms.md b/adev/src/content/guide/forms/reactive-forms.md index db10623d66b..b88663d4be8 100644 --- a/adev/src/content/guide/forms/reactive-forms.md +++ b/adev/src/content/guide/forms/reactive-forms.md @@ -114,9 +114,9 @@ The following example shows how to manage multiple form control instances in a s Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package. - +```shell ng generate component ProfileEditor - +``` diff --git a/adev/src/content/guide/i18n/import-global-variants.md b/adev/src/content/guide/i18n/import-global-variants.md index f18d073b946..16ca839d624 100644 --- a/adev/src/content/guide/i18n/import-global-variants.md +++ b/adev/src/content/guide/i18n/import-global-variants.md @@ -4,11 +4,9 @@ The [Angular CLI][CliMain] automatically includes locale data if you run the [`n - - +```shell ng build --localize - - +``` HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\). The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command. diff --git a/adev/src/content/guide/routing/router-tutorial.md b/adev/src/content/guide/routing/router-tutorial.md index f4d181422e2..f87e148fdc7 100644 --- a/adev/src/content/guide/routing/router-tutorial.md +++ b/adev/src/content/guide/routing/router-tutorial.md @@ -28,9 +28,9 @@ This application will have two components: _crisis-list_ and _heroes-list_. 1. Create a new Angular project, _angular-router-sample_. - + ```shell ng new angular-router-sample - + ``` When prompted with `Would you like to add Angular routing?`, select `N`. @@ -41,9 +41,9 @@ This application will have two components: _crisis-list_ and _heroes-list_. 1. From your terminal, navigate to the `angular-router-sample` directory. 1. Create a component, _crisis-list_. - +```shell ng generate component crisis-list - +``` 1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML. @@ -51,9 +51,9 @@ ng generate component crisis-list 1. Create a second component, _heroes-list_. - +```shell ng generate component heroes-list - +``` 1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML. @@ -65,9 +65,9 @@ ng generate component heroes-list 1. Verify that your new application runs as expected by running the `ng serve` command. - +```shell ng serve - +``` 1. Open a browser to `http://localhost:4200`. @@ -238,9 +238,9 @@ In this section, you'll create a 404 page and update your route configuration to 1. From the terminal, create a new component, `PageNotFound`. - +```shell ng generate component page-not-found - +``` 1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML. diff --git a/adev/src/content/guide/tailwind.md b/adev/src/content/guide/tailwind.md index e68fde33137..c7b9d078e62 100644 --- a/adev/src/content/guide/tailwind.md +++ b/adev/src/content/guide/tailwind.md @@ -8,10 +8,10 @@ First, create a new Angular project if you don't have one set up already. - +```shell ng new my-project cd my-project - +``` ### 2. Install Tailwind CSS diff --git a/adev/src/content/guide/testing/component-harnesses-testing-environments.md b/adev/src/content/guide/testing/component-harnesses-testing-environments.md index 75fa6de3b05..ada708ab62f 100644 --- a/adev/src/content/guide/testing/component-harnesses-testing-environments.md +++ b/adev/src/content/guide/testing/component-harnesses-testing-environments.md @@ -19,9 +19,9 @@ Otherwise, to add support for other environments, you need to define how to inte The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: - - ng add @angular/cdk - +```shell +ng add @angular/cdk +``` ## Creating a `TestElement` implementation diff --git a/adev/src/content/guide/testing/components-basics.md b/adev/src/content/guide/testing/components-basics.md index 9d4ebc12fa0..538a505287b 100644 --- a/adev/src/content/guide/testing/components-basics.md +++ b/adev/src/content/guide/testing/components-basics.md @@ -34,11 +34,9 @@ The CLI creates an initial test file for you by default when you ask it to gener For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder \(with inline template and styles\): - - +```shell ng generate component banner --inline-template --inline-style --module app - - +``` It also generates an initial test file for the component, `banner-external.component.spec.ts`, that looks like this: diff --git a/adev/src/content/guide/testing/creating-component-harnesses.md b/adev/src/content/guide/testing/creating-component-harnesses.md index ec9b1f22aff..fcce760d70c 100644 --- a/adev/src/content/guide/testing/creating-component-harnesses.md +++ b/adev/src/content/guide/testing/creating-component-harnesses.md @@ -14,9 +14,9 @@ For components that appear in only one place, such as a page in an application, The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: - - ng add @angular/cdk - +```shell +ng add @angular/cdk +``` ## Extending `ComponentHarness` diff --git a/adev/src/content/guide/testing/karma.md b/adev/src/content/guide/testing/karma.md index a54d896fb71..064b617c28a 100644 --- a/adev/src/content/guide/testing/karma.md +++ b/adev/src/content/guide/testing/karma.md @@ -116,9 +116,7 @@ The Angular CLI takes care of Jasmine and Karma configuration for you. It constr If you want to customize Karma, you can create a `karma.conf.js` by running the following command: ```shell - ng generate config karma - ``` HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html). diff --git a/adev/src/content/guide/testing/using-component-harnesses.md b/adev/src/content/guide/testing/using-component-harnesses.md index 6edb9fcb438..8bdd279fa78 100644 --- a/adev/src/content/guide/testing/using-component-harnesses.md +++ b/adev/src/content/guide/testing/using-component-harnesses.md @@ -8,9 +8,9 @@ TIP: This guide assumes you've already read the [component harnesses overview gu The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: - - ng add @angular/cdk - +```shell +ng add @angular/cdk +``` ## Test harness environments and loaders