Skip to content

Commit

Permalink
docs: update getting started (#29423)
Browse files Browse the repository at this point in the history
(cherry picked from commit f509e53)
  • Loading branch information
andrewseguin committed Jul 11, 2024
1 parent 57cc0b0 commit 2124ce6
Showing 1 changed file with 7 additions and 15 deletions.
22 changes: 7 additions & 15 deletions guides/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,19 @@ This guide explains how to set up your Angular project to begin using Angular Ma
information on prerequisites, installing Angular Material, and optionally displaying a sample
Material component in your application to verify your setup.

*Angular Resources*

If you are new to Angular or getting started with a new Angular application, see
[Angular's full Getting Started Guide](https://angular.io/start) and
[Setting up your environment](https://angular.io/guide/setup-local).

For existing applications, follow the steps below to begin using Angular Material.
This guide assumes that the [Angular CLI](https://angular.dev/tools/cli/setup-local#install-the-angular-cli) has already been installed.

## Install Angular Material

Use the Angular CLI's installation [schematic](https://material.angular.io/guide/schematics) to set
up your Angular Material project by running the following command:
Add Angular Material to your application by running the following command:

```bash
ng add @angular/material
```

The `ng add` command will install Angular Material, the
[Component Dev Kit (CDK)](https://material.angular.io/cdk/categories),
[Angular Animations](https://angular.io/guide/animations) and ask you the following questions to
[Angular Animations](https://angular.dev/guide/animations) and ask you the following questions to
determine which features to include:

1. Choose a prebuilt theme name, or "custom" for a custom theme:
Expand All @@ -36,7 +29,7 @@ determine which features to include:

3. Set up browser animations for Angular Material:

Importing the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) into your application enables Angular's [animation system](https://angular.io/guide/animations). Declining this will disable most of Angular Material's animations.
Importing the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) into your application enables Angular's [animation system](https://angular.dev/guide/animations). Declining this will disable most of Angular Material's animations.

The `ng add` command will additionally perform the following actions:

Expand All @@ -50,23 +43,22 @@ The `ng add` command will additionally perform the following actions:

You're done! Angular Material is now configured to be used in your application.


### Display a component

Let's display a slide toggle component in your app and verify that everything works.

You need to import the `MatSlideToggleModule` that you want to display by adding the following lines to
your `app.module.ts` file.
your standalone component's imports, or otherwise your component's `NgModule`.

```ts
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule ({
@Component ({
imports: [
MatSlideToggleModule,
]
})
class AppModule {}
class AppComponent {}
```

Add the `<mat-slide-toggle>` tag to the `app.component.html` like so:
Expand Down

0 comments on commit 2124ce6

Please sign in to comment.